本文介绍微信小程序语法
配置文件
app.json的配置(全局)
{ // 用来配置页面的路径 "pages":[ "pages/index/index", // 首页 "pages/Test/Test" // 跳转的页面 ], "window":{ "enablePullDownRefresh": true, // 是否支持下拉刷新 "backgroundTextStyle":"dark", // 下拉刷新的字体颜色，支持light "backgroundColor": "#e04c4c", // 设置下拉刷新的背景颜色 "navigationBarBackgroundColor": "#fff", // 设置微信程序顶部导航栏颜色 "navigationBarTitleText": "yejiawei", // 顶部导航栏文字 "navigationBarTextStyle":"black" // 顶部导航栏文字样式，black或者white "onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置 }, "tabBar": { // 设置tab切换栏的配置 "list": [ { "pagePath": "pages/index/index", // 跳转的路径 "text": "首页", // tab的文字 "iconPath": "/images/t1.jpg" // 设置背景图路径 }, { "pagePath": "pages/Test/Test", "text": "测试", "selectedIconPath": "/images/t1.jpg" // 设置选中时图片的路径 } ], "color": "#e04c4c", // 设置tab按钮字体颜色 "selectedColor": "#000", // 设置按钮选中的颜色 "backgroundColor": "#1aad16", // 设置tab按钮的背景颜色 "borderStyle": "black", // 设置tabbar边框颜色，只支持black/white "position": "top" // 设置tabbar的位置，设置为top无法显示图片 }, "networkTimeout": { "request": 10000, // request请求的超时时间 "connectSocket": 10000, // connectSocket的超时时间 "downloadFile": 10000, // 下载文件的超时时间 "uploadFile": 1000 // 上传文件的超时时间 }, "debug": true // 开启debug模式，在控制台输出程序信息 }page.json的配置(页面)
js 设置的配置用来覆盖app.json中的window配置 { "navigationBarBackgroundColor": "#ffffff", // 设置微信程序顶部导航栏颜色 "navigationBarTextStyle": "black", // 顶部导航栏文字样式，black或者white "navigationBarTitleText": "微信接口功能演示", // 顶部导航栏文字 "backgroundColor": "#eeeeee", // 设置下拉刷新的背景颜色 "backgroundTextStyle": "light", // 下拉刷新的字体颜色，支持light "enablePullDownRefresh": true, // 是否支持下拉刷新 "disableScroll": true, // 是否支持滚动 "onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置 }程序入口函数(App)
App({ onLaunch: function (options) { // 程序加载调用 }, onShow: function (options) { // 从后台进入前台调用，默认程序第一次加载回调用 }, onHide: function () { // 从前台切换到后台调用 }, onError: function (msg) { // 程序报错调用 }, myFunc: function() { // 自定义函数 }, globalData: { // 全局自定义数据 userInfo: "yejiawei" } }) 上面的onLaunch和onShow方法都有options参数，options参数里面有如下属性 { path: "pages/index/index" // 程序打开的路径 query: {}, // 当调用wx.navigateTo可以传递query scene: 1001, // 打开小程序的场景值 referrerInfo: { // 从其他程序中进入到此程序，会返回此字段 appId: ..., // 其他程序的appId extraData: ... // 其他程序传递过来的数据 } } 可以使用 var app = getApp(); 来获取小程序实例，console.log(app.globalData.userInfo)页面的入口函数(Page)
Page({ data: { msg: "haha" // 页面的状态 }, onLoad: function(options) { // 页面加载完毕触发 }, onReady: function() { // 页面渲染完毕触发 }, onShow: function() { // 页面开始渲染触发 }, onHide: function() { // 页面切换到后台触发 }, onUnload: function() { // 页面卸载触发 }, onPullDownRefresh: function() { // 页面下拉刷新触发}, onReachBottom: function() { // 页面上滑触底触发 }, onShareAppMessage: function () { // 页面点击转发触发，需要return一个object，只有定义了此方法，才会有转发的功能 return { title: "分享的页面", // 分享页面的标题 path: "/pages/logs/logs" // 分享的页面的路径 } }, onPageScroll: function(options) { // 页面滚动触发 }, myFn: function() { // 自定义函数 console.log(this.route); // 获取当前页面的路径 this.setData({ // 修改状态 msg: "haha" }, function() { // 状态修改完，调用此方法 }) console.log(getCurrentPages()); // 获取当前页面栈实例 } customData: { // 自定义属性 } })页面路由
方法wx.navigateTo(object) 跳转到指定的页面，无法跳转到tabbar页面（当前页保留） wx.navigateTo({ url: '/pages/logs/logs?id=1', // 页面路劲，可以传递query参数 success: function() { // 导航成功执行 console.log("跳转成功"); }, fail: function() { // 导航失败执行 console.log("跳转失败"); }, complete: function() { // 导航完成调用 console.log("导航结束"); } }) 方法wx.navigateBack(object) 返回到之前的页面 wx.navigateBack({ delta: 2 // 后退2步 }) 方法wx.redirectTo(object) 销毁当前页面，跳转到指定的页面，不能跳转到tabbar页面 使用方法和navigateTo一样 方法wx.reLaunch(object) 销毁所有页面，跳转到任意指定的页面 使用方法和navigateTo一样 方法wx.switchTab(object) 跳转到tabbar页面 使用方法和navigateTo一样模块化
js文件可以使用exports和module.exports暴露接口 exports是module.exports的一个引用 function fn () { console.log("导入的方法执行了"); } exports.fn = fn; 使用文件中的方法 var common = require('../common.js'); common.fn();WXML文件细节
状态绑定
变量使用双大括号包裹{{msg}} 标签的属性使用双引号包裹双引号里面的内容wx都会将其转化成字符串，所以true,false要表达本意需要再包裹双大括号 绑定对象，不需要对象的花括号 列表遍历
{{index}}: {{item}} 给index和item取别名{{myIndex}}: {{myItem}} 渲染多节点代码块{{index}}: {{item}} {{item}} 绑定key，当组件重排后根据id可以复用组件和组件的状态// 当item是字符串或者数字可以使用*this代表item作为key {{index}}: {{item}} 条件渲染
haha haha1 haha2 同样也可以使用block来控制多节点代码块模板
声明一个模板{{a}}: {{b}} 使用此模板 obj: { a: 1, b: 2 }事件
使用bindtap绑定事件事件对象 myFn: function(event) { console.log(event); // 使用data开头的自定义属性，将保存再event.currentTarget.dataset中 } 事件分类 冒泡事件 touchstart 开始触摸 touchmove 触摸移动 touchcancel 触摸打断 touchend 触摸离开 tap 瞬间触摸 longpress 超过350ms的触摸 transitionend 过渡结束 animationstart 动画开始 animationiteration 动画执行一遍后触发 animationend 动画结束触发 非冒泡事件，除了上述事件以外都是非冒泡事件 绑定事件 可以使用bind和catch绑定 bindtap或者bind:tap 不阻止冒泡 catchtap或者catch:tap 阻止冒泡 在WXML文件中导入其他WXML文件
可以将上面讲的template代码，放到一个单独的wxml文件中，然后在当前文件中使用导入，就可以立即使用了 而 的作用，是将除了template和wxs以外的代码，都拷贝到include所在的位置 wxs的使用（代码可以单独写在wxs文件中，也可以写在wxs标签中）
模块
wxs的作用其实和js文件的作用是一样的，只不过提供了另外一种方式来写js 外界要访问wxs中定义的代码需要使用module.exports导出 创建一个wxs文件，定义如下代码 var message = "你好吗？"; module.exports.message = message; 在wxml文件中使用 首先使用wxs标签导入使用 {{wxsData.message}} 在其他wxs文件中使用 var wxsData = require("../common.wxs");WXSS文件
尺寸单位使用rpx，一个rpx就代表一个物理像素 导入其他WXSS文件 @import "../common.wxss";自定义组件（和vue里面的组件类似）
创建自定义组件的步骤
第一步，修改json 修改json文件为 { "component": true } 第二部，WXML文件书写{{text}} slot就是插槽，和vue的一样 第三步，WXSS中书写 .demo{ color: red; } 只能使用类选择器 第四部，js文件中写 Component({ properties: { // 组件的属性，可以指定类型和默认值，和vue的props验证很像 text: { type: String, value: '默认值', } }, data: { // 组件的状态 someData: {} }, methods: { // 组件的自定义方法 customMethod: function () { } } }) 第五步，使用组件 在要使用此自定义组件的page中，修改他的json，插入如下字段 "usingComponents": { "my-component": "../myComponent/myComponent" } 在page组件中使用 即可 同时可以使用 传递属性值给组件内部 WXML文件的细节
写法和一般的WXML文件写法一致，不过多了slot 没有名字的slot只能有一个，如果要使用多个slot，需要操作如下几步 第一步，在js中的Component函数中，添加如下 options: { multipleSlots: true }, 第二步，在WXML中写多个带名字的slot{{text}} 第三步，在页面中使用 我是a 我是b WXSS文件的细节
只能使用类选择器 可以继承组件外的样式 app.wxss文件中定义的样式，对组件无效 另外可以使用:host来定义组件标签的样式 :host{ color: black; }js文件的细节
Component函数的使用如下 Component({ properties: { // 设置组件接受的属性 myProperty1: { // 属性名 type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个 observer: function(newVal, oldVal){ // 监听属性值改变的函数 } }, myProperty2: String // 简化的定义方式 }, data: {}, // 组件状态 methods: { // 设置方法 onMyButtonTap: function(){ console.log(this.id); // 组件标签的id console.log(this.dataset); // 组件的data自定义属性集合 console.log(this.data); // 组件的属性和状态的集合 console.log(this.hasBehavior()) // 组件是否有behavior属性 this.setData({}) // 属性和状态都可以设置 /* 可以手动触发组件的自定义事件，比如，组件上绑定了一个自定义事件要手动触发myEvent，需要调用 this.triggerEvent('myEvent', { // 事件参数 }, { bubbles: true, // 是否冒泡 composed: true, // 到父组件内部寻找同名事件 capturePhase: true // 是否捕获 } ); */ } }, created: function(){}, // 组件在内存中创建完毕执行 attached: function(){}, // 组件挂载之前执行 ready: function() {}, // 组件挂载后执行 detached: function(){}, // 组件移除执行 moved: function(){}, // 组件移动的时候执行 relations: { /* 嵌套的组件需要相互关联就要使用此字段 相同嵌套子节点的处理方式 假设嵌套的html结构如下 item 1 item 2 item 1 item 2 按需加载
实现按需加载的步骤如下 主包中应只包含tabbar 第一步，在项目根目录下创建分包的文件夹，将分包的page写在里面 第二步，在app.json中添加如下配置 "subPackages": [ { "root": "package1", // 分包文件夹根路径 "pages": [ // 分包中包含的路径，不能添加到app.json的page中 "pages/Demo/Demo" ] } ] 在tabbar配置项中，不能应用分包的页面 第三步，使用分包文件 在tabbar的页面中，引用分包页 wx.navigateTo({ url: '../../package1/pages/Demo/Demo' })