1.与html的差异

在小程序中，以为的html标签被称作组件，常用对应如下
div 改用 view
img 改用 image
a 改用 navigator
同时小程序中也提供了 video视频 audio音频 swiper轮播图等常用组件
具体属性与h5有差别，需要注意特别注意block 并不是一个真的组件，不会在页面中做任何渲染，只接受控制属性在写循环和条件的时候很常用
例如

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

2.页面入口文件

在根目录的app.json全局配置里配置pages字段的第一个值，为小程序的入口文件。其余的页面也要配置到里面

3.全局变量与全局方法

在根目录的app.js里面使用字段globalData来保存全局变量，之后在不同页面使用内置的 getApp()方法来获取app ，在使用app.globalData进行调用例如在app.js中

App({
  globalData:{
    userName:"edward"
  },
  onLaunch () {
  
  },
  getSomething(){//全局方法
  
  }
  ...
})

在某一page中进行调用

const app = getApp()
let userName = app.globalData.userName;
Page({
    data: {},
    onLoad(options) {
        let data = app.getSomething();
    ...
    }
})

4.组件与页面

在微信小程序中不管是组件还是页面都有 .js .json .wxml .wxss 四个文件组成
页面需要在js中使用 Page({}）方法进行构造即告诉小程序我是页面，如果页面使用了组件需要在相应json的usingComponents字段进行配置
组件需要在js中使用 Component({}）方法进行构造即告诉小程序我是组件。

在小程序的开发工具中新建page/component会自动生成这4个文件，非常方便。

5.页面跳转

使用组件navigator
使用小程序路由中的wx.redirectTo和wx.navigateTo跳转使用wx.navigateBack返回使用这两种跳转时，小程序会把新页面放入栈中，栈内元素最多10个。
- redirectTo在栈满之后会将旧页面出栈，在放入新页面。
- navigateTo在栈满之后不会将旧页面出栈。因此使用navigateTo，跳转10次之后就不能在跳转。
- navigateBack返回栈内保存的页面。

6.属性赋值false

如果直接写false没有{{}}，js会把false当成字符串，识别为true 想要赋值默认false则需要{{false}} 例如

    <video src="{{url}}" controls="{{false}}" 
        show-center-play-btn="{{false}}"
    ></video>

7.获取url参数

不需要原生js那样处理，使用onLoad onLoad方法在页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

8.onLaunch方法中的请求没有执行完，首屏使用取不到值

在小程序中，我在onLaunch方法请求值并保存到globalData中，之后在首屏页面的onLoad中使用。这时是找不到这个值的。因为请求是异步的，请求结果没有返回，小程序就已经执行了onLoad方法。解决方法如下

使用启动页，在启动页获取信息之后再打开首屏页
使用Promise改良请求代码如下 app.js

App({
    globalData:{
        testId:"",
    },
    getA(){
        let that = this;
        return new Promise((resolve, reject) => {
            wx.request({
                url: that.globalData.ajaxBaseUrl+'getA.php',
                header: {'content-type': 'text/html'},
                method:"post",
                success:res => {
                    that.globalData.testId = res.data.testId;
                    resolve(res.data.testId);
                }
            })
        })
    }
})

page的index.js

    getB(){
        let that = this;
        return new Promise((resolve, reject) => {
            app.getA().then(testid=>{
                wx.request({
                    url: app.globalData.ajaxBaseUrl+'getB.php?testId='+testid,
                    header: { 'content-type': 'text/html' },
                    method:"post",
                    success:res => {
                        that.setData({
                            dataB:res.data.dataB
                       })
                    },
                    fail:res=>{
                    }
                })
            })
        })
    },

9.target与currentTarget

小程序事件系统

target 触发事件的源组件。
currentTarget 事件绑定的当前组件。

获取组件上的data-* 数据采用e.currentTarget.dataset.*

老前端出坑小程序（一）