微信开发者工具

工欲善其事必先利其器，我们先来了解下微信开发者工具的基本用法。首先看下微信开发者工具的界面，分成5个部分介绍。



  1. 模拟器：可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。
  2. 编辑器：编辑代码的地方，在这里新建的page页能自动生成.js、.json、.wxml、.wxss后缀名的4个文件。左侧为项目的结构展示区，右侧为编辑代码区域。
  3. 调试器：前端同学最爱的东西，你想打印的东西都可以在这里出现。
  4. 这里相当于浏览器的url，能显示小程序的路径和页面参数
  5. 各种工具栏，举例下比较常用的工具：
  • 普通编译：点击下拉的小三角，能添加各个路径的页面和页面参数，选择后能直达目标页面，聪明的同学已经想到页面参数能从上面的第4小点获取。
  • 预览：能够生成临时二维码供开发者在真机上调试，或者发给其他人员体验。新版本已经有自动预览功能，终于不用每次都拿着手机去扫码了。
  • 远程调试：类似于预览，不同的地方是能够把真机上的打印信息显示在调试器上面。
  • 切后台：能模拟onShow和onHide这2个生命周期。
  • 上传：上传到当前AppID的微信公众平台，用于设置体验版和提审发布。
  • 测试：每24小时能提交一次测试，会生成相应的测试报告，目前是6个安卓的机型。缺点是碰到需要账号登录的地方就会卡住，后面很多页面都无法覆盖。测试的时候记得在微信公众平台的开发设置中把测试环境的地址配置在request合法域名，否则会报错。上传测试时候的代码包的大小是未经压缩的本地代码的大小。
  • 项目详情：在工具->项目详情，里面有appid信息，目录地址，最最重要的是能显示代码包的大小，小程序目前代码包的上限是2M，代码包的大小直接影响到小程序打开的速度，关于小程序的瘦身应该好好研究。

开发注意事项

介绍之前可以先好好去看看微信开发者文档，大部分东西都在文档里面。

结构目录

文件

必填

作用

app.js

是

小程序逻辑

app.json

是

小程序公共设置

app.wxss

是

小程序公共样式表

小程序页面组成

文件类型

必填

作用

js

是

页面逻辑

json

是

页面结构

wxml

否

页面样式表

wxss

否

页面配置

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

配置

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。(在项目中对应project.config.json)

{
  "pages":[],  // 设置页面路径
  "backuppage":[],
  "window":{  // 用于设置小程序的状态栏、导航条、标题、窗口背景色。
   },
"tabBar": {  // 设置底部 tab 的表现
    "position": "top",  // 当设置 position 为 top 时，将不会显示 icon。默认为bottom，非必填
    "color": "#999999",
    "selectedColor": "#FF2266",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
      "iconPath": "images/bar/footer-icon-01.png",   // 初始的图标
      "selectedIconPath": "images/bar/footer-icon-01-active.png",  // 选中后的图标
      "text": "首页"
    }, {
      "pagePath": "pages/cart/index",
      "iconPath": "images/bar/footer-icon-02.png",
      "selectedIconPath": "images/bar/footer-icon-02-active.png",
      "text": "购物车"
    }, {
      "pagePath": "pages/my/index",
      "iconPath": "images/bar/footer-icon-03.png",
      "selectedIconPath": "images/bar/footer-icon-03-active.png",
      "text": "我"
    }]
  },
  "networkTimeout": {  // 设置网络超时时间
    "request": 10000
  },
  "debug": true  // 设置是否开启 debug 模式
}
复制代码

注册小程序

App({
  onLaunch: function(options) {
    // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  },
  onShow: function(options) {
      // 当小程序启动，或从后台进入前台显示，会触发 onShow.
  },
 onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  onPageNotFound: function(msg) {
    console.log(msg)
  },
})
复制代码
注意事项
  • App() 必须在 app.js 中注册，且不能注册多个。
  • 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
  • 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
  • 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

注册页面

Page({
    data: {
        text: "This is page data."
        //页面的初始数据
    },
    onLoad: function(options) {
        //options里面是页面所带的参数， 以json对象的形式展示 { "title": "123" } 
        // 生命周期函数--监听页面加载一个页面只会调用一次
    },
    onReady: function() {
        // 生命周期函数--监听页面初次渲染完成一个页面只会调用一次，对界面设置wx.setNavigationBarTitle请在onReady之后调用
    },
    onShow: function() {
        // 生命周期函数--监听页面显示每次打开页面都会调用
    },
    onHide: function() {
        // 生命周期函数--监听页面隐藏当navigateTo或底部tab切换时调用
    },
    onUnload: function() {
        // 生命周期函数--监听页面卸载当redirectTo或navigateBack的时候调用
    },
    onPullDownRefresh: function() {
        //页面相关事件处理函数--监听用户下拉动作，如需要禁止下拉刷新可调用wx.stopPullDownRefresh()或在window中enablePullDownRefresh设置为false
    },
    onReachBottom: function() {
        // 页面上拉触底事件的处理函数,可在window中设置触发距离onReachBottomDistance，在触发距离内滑动期间只会触发一次
    },
    onShareAppMessage: function() {
        return {
            title: '自定义转发标题',
            path: '/page/user?id=123', //转发路径必须是以 '/' 开头的完整路径,默认去当前页面路径
            imageUrl: '' //显示图片长宽比是 5:4，不自定义转发图片的情况下，默认会取当前页面，从顶部开始，高度为 80% 屏幕宽度的图像作为转发图片
        }
        // 用户点击右上角转发或设置button组件open-type="share"，用户在点击按钮后会触发该事件
    },
    onPageScroll: function() {
        // 页面滚动触发事件的处理函数
    },
    onTabItemTap(item) {
        //当前是 tab 页时，点击 tab 时触发
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
    }
})
复制代码

路由

路由的跳转形式分4种

路由方式

触发时机

路由前页面

路由后页面

初始化

小程序打开的第一个页面

onLoad, onShow

打开新页面

调用 API wx.navigateTo 或使用组件<navigator open-type="navigateTo"/>

onHide

onLoad, onShow

页面重定向

调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>

onUnload

onLoad, onShow

页面返回

调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮

onUnload

onShow

Tab 切换

调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab

各种情况请参考下表

重启动

调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

onUnload

onLoad, onShow

Tips:
  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

WXML

事件绑定和冒泡：
  • 事件绑定的写法同组件的属性，以 key、value 的形式
  • key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bindtap、catchtap
  • value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 绑定的事件 其中getDataset不能携带参数，如果想要传递用data-xx的形式，对于data-xx的写法要注意：
Page({
    getDataset: function(event) {
        event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
        event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
    }
})
复制代码
表单事件提交

form表单提交的submit，可用于增加消息推送次数，必须用button组件，用户点击后会在formSubmit方法会收到一个e.detail.formId，用于发送推送消息。如果是支付场景，提交的formId为本次支付的prepay_id。1次提交表单的formid可下发一条模板消息，prepay_id则为3次，目前没有上限次数。

<form bindsubmit="formSubmit" bindreset="formReset" report-submit='true'>
    <button class="border-radius0 colorBtn" data-type="1" formType="submit" bindtap="on_buy">我要开团</button>
</form>
复制代码
WSX:（目前不支持es6）

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 注意点：

  1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
  2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
  3. 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
  4. wxs 函数不能作为组件的事件回调。
  5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。