微信小程序学习总结(一)项目创建与目录结构分析


Posted in Javascript onJune 04, 2020

本文实例讲述了微信小程序项目创建与目录结构。分享给大家供大家参考,具体如下:

首先,放上微信公众品台的网址https://mp.weixin.qq.com/,下面内容完全可以跟着做。https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
下载开发工具。

创建项目

如图所示

微信小程序学习总结(一)项目创建与目录结构分析

选点此校验就行啦,右边有个详情也点开瞅两眼。

微信小程序学习总结(一)项目创建与目录结构分析

上传测试和腾讯这块点不了是为啥呢,因为你创建项目的时候没有填写AppID,下一题。

具体的东西下载下来瞅瞅点点就行。下面介绍结构。

目录结构

微信小程序学习总结(一)项目创建与目录结构分析

1.wxml相当于html,wxss相当于css

2.在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成改页面所需要的文件

微信小程序学习总结(一)项目创建与目录结构分析
同样里面也会生成四个文件,且与文件名同名的文件。

微信小程序学习总结(一)项目创建与目录结构分析
3.ctrl+s相当于点击编译

4.外面的四个文件相当于全局文件,那么是听谁的呢,当然是就近原则了,离谁近受谁影响

例子:在index.wxml写上这么一句<text>hello world </text>,在index.wxss中写上text{ color:red; },在全局wxss中写text{ color:blue; },结果颜色为红色啦。

5.json文件是来干嘛的呢。我们来看官方的解释。app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

第一部分pages

微信小程序学习总结(一)项目创建与目录结构分析
接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

第二部分window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

微信小程序学习总结(一)项目创建与目录结构分析
很给力!

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 #Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 #Javascript
JavaScript监听键盘事件代码实现
Jun 03 #Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python处理图片之PIL模块简单使用方法
2015/05/11 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
计算机专业自我鉴定
2013/10/15 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
教学实习自我评价
2014/01/28 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
圣诞晚会主持词
2015/07/01 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python