最最重要的还是得从阅读开发文档入手
1. 目录结构
1.1 微信小程序文件结构
wxml[结构] + wxss[样式] + js[逻辑] + json[配置]
2. 配置
2.1 全局配置 -- 根目录下的 app.json
2.2 页面配置
每一个小程序页面也可以使用
.json文件来对本页面的窗口表现进行配置。
页面中配置项在当前页面会覆盖
app.json的 window 中相同的配置项。
3. 小程序框架
-
通过
App()来注册一个小程序 -
通过
Page()来注册一个页面 -
通过
Component()来注册组件
整个小程序只有一个App实例
3.1 注册小程序
-
在
app.js中调用App()注册小程序实例 -
整个小程序只有一个
App实例，是全部页面共享的 -
开发者可以通过
getApp()方法获取到全局唯一的App实例，获取App上的数据或调用开发者注册在App上的函数。
3.2 生命周期
// 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',
// 不要在定义于App()内的函数中调用getApp()，使用this就能拿到app实例
// globalData: {
// data1: 'data1Value'
// }
})
3.3 注册页面
-
小程序页面在对应的
js文件中使用Page()进行注册 -
指定页面的初始数据、生命周期回调、事件处理函数等
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
3.4 使用Component构造器构造页面
Component构造器的主要区别是：方法需要放在methods: { }里面。
Component({
data: {
text: "This is page data."
},
methods: {
onLoad: function(options) {
// 页面创建时执行
},
onPullDownRefresh: function() {
// 下拉刷新时执行
},
// 事件响应函数
viewTap: function() {
// ...
}
}
})
3.5 自定义组件
3.5.1 组件自定义步骤
- 首先需要在 json文件中进行自定义组件声明
// .json
{
"component": true
}
- 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
// .js
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})
3.5.2 使用自定义组件
- 在页面的
json文件中进行引用声明
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
- 在页面的
wxml中就可以像使用基础组件一样使用自定义组件
- 节点名即自定义组件的标签名，节点属性即传递给组件的属性值
<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text">
</component-tag-name>
</view>
3.5.3 注意
-
因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
-
自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用
usingComponents字段）。 -
自定义组件和页面所在项目根目录名不能以
“wx-”为前缀，否则会报错。
4. 页面路由
在小程序中所有页面的路由全部由框架进行管理， 框架以__栈__的形式维护了当前的所有页面
4.1 页面栈
4.2 注意点
-
navigateTo,redirectTo只能打开非tabBar页面。 -
switchTab只能打开tabBar页面。 -
reLaunch可以打开任意页面。 -
页面底部的
tabBar由页面决定，即只要是定义为tabBar的页面，底部都有tabBar。 -
调用页面路由带的参数可以在目标页面的
onLoad中获取
5. 模块化
-
将公共代码抽离到
js文件，通过module.exports暴露接口 -
在需要使用这些模块的文件中，使用
require将公共代码引入
6. 事件系统
6.1 绑定事件
-
bindtap -
catchtap-- 不冒泡
如果一个view有多个bindtap，只走最后一个
如果一个view同时有bindtap和catchtap，只走catchtap
6.2 双向绑定
<view class="list">
<text class="list_left">身份证号：</text>
<input value="{{infodata.idCard}}" data-type="idCard" bindinput="inputChange"/>
</view>
inputChange(e){
var content = e.detail.value
var type = e.currentTarget.dataset.type
switch (type) {
case "idCard":
this.setData({
["infodata.idCard"]: content
})
break;
}
}
6.3 发起https网络通信
function indexStore(store_id, cb) {
wx.request({
url: urlSet.indexStore,
header: {
"content-type": "application/x-www-form-urlencoded"
},
methods: "post",
data: util.json2Form({
store_id: store_id
}),
complete: function(res) {},
fail: function() {
return typeof cb == "function" && cb("获取店铺信息失败", false)
}
})
}
6.4 微信登录
6.5 本地数据缓存
-
wx.getStorageSync|wx.getStorage -
wx.setStorageSync|wx.setStorage -
wx.setStorageSync和wx.setStorage的区别wx.setStorage(object)是一个异步接口，参数object包含key和data（需要存储的内容）- 3个回调函数
success（接口调用成功的回调函数）fail（接口调用失败的回调函数）complete（接口调用结束的回调函数，调用成功、失败都会执行）
- 3个回调函数
wx.setStorageSync(key，data)是一个同步接口，需要接受key和data（String/Object）2个参数