老前端出坑小程序（一）

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.*