一、开发前准备
1、开发工具下载。
3、首先要通读一遍官方文档,看看都有哪些东西,都能干什么。
二、目录结构
1、components 小程序自定组件 (组件生命周期,组件间通信与事件,数据监听器)
2、images 小程序内图片资源
3、miniprogram_npm 使用npm包安装的组件
4、pages 小程序页面文件夹放置微信小程序所有的小程序页面,每个小程序页面基本有.js .json .wxml .wxss 四个文件组成
- js:文件帮我们去处理微信小程序里面的逻辑和数据交互(数据双向绑定,获取界面上的节点信息)
- json:文件帮我们配置微信小程序页面的一个配置信息
- wxml:文件是用来帮我们展示我们小程序页面的元素和内容(数据绑定、列表渲染、条件渲染、模板、引用)
- wxss:文件帮我们设置小程序页面元素的样式
5、utils 小程序公用类目录
6、app.js:注册小程序
7、app.json:文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
8、app.wxss:小程序公共样式表
三、开发详解系列
1、APP生命周期(app.js注册小程序,小程序运行机制)
//必须在 app.js 中调用,必须调用且只能调用一次。
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
navigateTo
,redirectTo
只能打开非 tabBar 页面。switchTab
只能打开 tabBar 页面,路径后不能带参数。reLaunch
可以打开任意页面。- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的
onLoad
中获取。
3、事件
- 冒泡事件(bind):当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件(catch):当一个组件上的事件被触发后,该事件不会向父节点传递。
- 互斥事件(mut-bind):如果事件冒泡到其他节点上,其他节点上的
mut-bind
绑定函数不会被触发,但bind
绑定函数和catch
绑定函数依旧会被触发。 - 事件的捕获(
capture-bind
、capture-catch
):触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。
4、获取用户信息(小程序登录、UnionID 机制说明,获取手机号,头像昵称、位置、运动步数等授权)
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
-
每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信。
-
域名必须经过 ICP 备案
-
域名只支持
https,
域名不能使用 IP 地址(
在微信开发者工具中,可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书
选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。)
四、Tip
1、setData接口的调用涉及逻辑层与渲染层间的线程通信,通信过于频繁可能导致处理队列阻塞,界面渲染不及时而导致卡顿,应避免无用的频繁调用。
- 视图层绑定的变量使用this.setData({a:'1'}),同时this.data.a同步改变。
- 要在页面渲染后执行的方法可以写在setData的回调方法中this.setData({a:'1'},()=>{ // Do something.})
- setData操作会引起框架处理一些渲染界面相关的工作,一个未绑定的变量意味着与界面渲染无关,传入setData会造成不必要的性能消耗。
2、组件对应 wxss 文件的样式,只对组件wxml内的节点生效。
- 继承样式,如 font 、 color ,会从组件外继承到组件内。
- 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
- 分包中不可使用其他分包资源,可使用主包资源;主包不可使用分包资源。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
3、小程序分包,单个包最大2M,代码包总大小20M
"pages": [ //主包页面配置
"pages/index/index",
],
"subpackages": [ // 配置分包
{
"root": "pages/activity", // 分包根目录
"pages": [ // 分包页面
"perInvite/index"
]
},
{
"root": "pages/subPages",
"pages": [
"camp/index"
]
}
],
- 分包中不可使用其他分包资源,可使用主包资源;主包不可使用分包资源。