微信小程序基础语法总结

本文介绍微信小程序语法

1. 配置文件

   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的配置(页面)

   设置的配置用来覆盖app.json中的window配置
   {
       "navigationBarBackgroundColor": "#ffffff", // 设置微信程序顶部导航栏颜色
       "navigationBarTextStyle": "black", // 顶部导航栏文字样式，black或者white
       "navigationBarTitleText": "微信接口功能演示", // 顶部导航栏文字
       "backgroundColor": "#eeeeee", // 设置下拉刷新的背景颜色
       "backgroundTextStyle": "light", // 下拉刷新的字体颜色，支持light
       "enablePullDownRefresh": true, // 是否支持下拉刷新
       "disableScroll": true, // 是否支持滚动
       "onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
   }
   

2. 程序入口函数(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)
   

3. 页面的入口函数(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: { // 自定义属性 }
   })
   

4. 页面路由

   方法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一样
   

5. 模块化

   js文件可以使用exports和module.exports暴露接口
       exports是module.exports的一个引用
       function fn () {
           console.log("导入的方法执行了");
       }
       exports.fn = fn;
   使用文件中的方法
       var common  = require('../common.js');
       common.fn();
   

6. WXML文件细节

   状态绑定

   变量使用双大括号包裹 <view>{{msg}}</view>
   标签的属性使用双引号包裹 <view id="item"></view>
   双引号里面的内容wx都会将其转化成字符串，所以true,false要表达本意需要再包裹双大括号
   绑定对象，不需要对象的花括号 <template is="mytemplate" data="{{ a: 1, b: 2 }}"></template>
   

   列表遍历

   <view wx:for="{{[1,2,3,4,5]}}" wx:key="{{item}}">
       {{index}}: {{item}}
   </view>
   给index和item取别名
       <view wx:for="{{[1,2,3,4,5]}}" wx:for-index="myIndex" wx:for-item="myItem">
           {{myIndex}}: {{myItem}}
       </view>
   渲染多节点代码块
       <block wx:for="{{[1, 2, 3]}}">
           <view> {{index}}: </view>
           <view> {{item}} </view>
       </block>
   遍历字符串
       <view wx:for="array">
           {{item}}
       </view>
   绑定key，当组件重排后根据id可以复用组件和组件的状态
       <block wx:for="{{[1, 2, 3]}}" wx:key="*this"> // 当item是字符串或者数字可以使用*this代表item作为key
           <view> {{index}}: </view>
           <view> {{item}} </view>
       </block>
   

   条件渲染

   <view wx:if="{{false}}">haha</view>
   <view wx:elif="{{true}}">haha1</view>
   <view wx:else="{{false}}">haha2</view>
   同样也可以使用block来控制多节点代码块
   

   模板

   声明一个模板
       <template name="mytemplate">
           <view>
               {{a}}: {{b}}
           </view>
       </template>
   使用此模板 obj: { a: 1, b: 2 }
       <template is="mytemplate" data="{{...obj}}"></template>
   

   事件

   使用bindtap绑定事件 <view bindtap="fn" data-my-data="222"></view>
   事件对象
       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文件中，然后在当前文件中使用 <import src="../common.wxml" /> 导入，就可以立即使用了
   而<include src="../common.wxml" />的作用，是将除了template和wxs以外的代码，都拷贝到include所在的位置
   

7. wxs的使用（代码可以单独写在wxs文件中，也可以写在wxs标签中）

   模块

   wxs的作用其实和js文件的作用是一样的，只不过提供了另外一种方式来写js
   外界要访问wxs中定义的代码需要使用module.exports导出
       创建一个wxs文件，定义如下代码
           var message = "你好吗？";
           module.exports.message = message;
       在wxml文件中使用
           首先使用wxs标签导入 <wxs src="../common.wxs" module="wxsData"/>
           使用 <view class="demo">{{wxsData.message}}</view>
       在其他wxs文件中使用
           var wxsData = require("../common.wxs");
   

8. WXSS文件

   尺寸单位使用rpx，一个rpx就代表一个物理像素
   导入其他WXSS文件 @import "../common.wxss";
   

9. 自定义组件（和vue里面的组件类似）

   创建自定义组件的步骤

   第一步，修改json
       修改json文件为 { "component": true }
   第二部，WXML文件书写
       <view class="demo"> {{text}} </view>
       <slot></slot>
       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组件中使用 <my-component></my-component> 即可
       同时可以使用 <my-component text="我是传递的属性"></my-component> 传递属性值给组件内部
   

   WXML文件的细节

   写法和一般的WXML文件写法一致，不过多了slot
   没有名字的slot只能有一个，如果要使用多个slot，需要操作如下几步
   第一步，在js中的Component函数中，添加如下
       options: {
           multipleSlots: true
       },
   第二步，在WXML中写多个带名字的slot
       <view class="demo"> {{text}} </view>
       <slot name="a"></slot>
       <slot name="b"></slot>
   第三步，在页面中使用
       <my-component text="我是传递的属性">
           <view slot="a">我是a</view>
           <view slot="b">我是b</view>
       </my-component>
   

   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({}) // 属性和状态都可以设置
               /*
                   可以手动触发组件的自定义事件，比如，组件上绑定了一个自定义事件
                   <my-component bindmyEvent="myFn"></my-component>
                   要手动触发myEvent，需要调用
                       this.triggerEvent('myEvent', {
                           // 事件参数
                           }, {
                               bubbles: true, // 是否冒泡
                               composed: true, // 到父组件内部寻找同名事件
                               capturePhase: true // 是否捕获
                           }
                       );
               */
           }
       },
       created: function(){}, // 组件在内存中创建完毕执行
       attached: function(){}, // 组件挂载之前执行
       ready: function() {}, // 组件挂载后执行
       detached: function(){}, // 组件移除执行
       moved: function(){}, // 组件移动的时候执行
       relations: {
           /*
               嵌套的组件需要相互关联就要使用此字段
               相同嵌套子节点的处理方式
                   假设嵌套的html结构如下
                       <custom-ul>
                           <custom-li> item 1 </custom-li>
                           <custom-li> item 2 </custom-li>
                       </custom-ul>
                   则custom-li组件中需要定义如下的relations
                   './custom-ul': { // 嵌套父组件的路径
                       type: 'parent', // 关联的目标节点应为父节点
                       linked: function(target) { }, // custom-li插入到custom-ul时执行，target是custom-ul
                       linkChanged: function(target) { }, // custom-li被移动后执行，target是custom-ul
                       unlinked: function(target) {  } // custom-li被移除时执行，target是custom-ul
                   }
                   在custom-ul组件中也要定义此字段，只不过反过来 type 改成 child
               不同嵌套子节点的处理方式
                   <custom-div>
                       <custom-span> item 1 </custom-span>
                       <custom-div> item 2 </custom-div>
                   </custom-div>
                   此时就要使用behavior作为公共的节点路径了，假设custom-span和custom-div都有一个名为customFormControls的behavior
                   custom-span和custom-div内部定义relations的方式和之前一样，只不过将type改成ancestor
                   custom-div中定义
                       'customFormControls': {
                           type: 'descendant', // 关联的目标节点应为子孙节点
                           target: customFormControls
                       }
           */
       },
       behaviors: [
           /*
               behaviors的作用就是用来创建一个公用的组件js，内部代码和Component一模一样
               Behavior({ //... })
               主要用来和当前的Component代码合并，同名的属性以当前组件的为主
           */
       ]
   })
   

10. 按需加载

    实现按需加载的步骤如下
    主包中应只包含tabbar
    第一步，在项目根目录下创建分包的文件夹，将分包的page写在里面
    第二步，在app.json中添加如下配置
        "subPackages": [
            {
                "root": "package1", // 分包文件夹根路径
                "pages": [ // 分包中包含的路径，不能添加到app.json的page中
                    "pages/Demo/Demo"
                ]
            }
        ]
        在tabbar配置项中，不能应用分包的页面
    第三步，使用分包文件
        在tabbar的页面中，引用分包页
        wx.navigateTo({
            url: '../../package1/pages/Demo/Demo'
        })