老前端出坑小程序（一）

時間 2019-12-09

標籤端出程序简体版

原文原文鏈接

1.與html的差別

在小程序中，覺得的html標籤被稱做組件，經常使用對應以下
div 改用 view
img 改用 image
a 改用 navigator
同時小程序中也提供了 video視頻 audio音頻 swiper輪播圖等經常使用組件
具體屬性與h5有差異，須要注意特別注意block 並非一個真的組件，不會在頁面中作任何渲染，只接受控制屬性在寫循環和條件的時候很經常使用
例如php

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>
複製代碼

2.頁面入口文件

在根目錄的app.json全局配置裏配置pages字段的第一個值，爲小程序的入口文件。其他的頁面也要配置到裏面html

3.全局變量與全局方法

在根目錄的app.js裏面使用字段globalData來保存全局變量，以後在不一樣頁面使用內置的 getApp()方法來獲取app ，在使用app.globalData進行調用例如在app.js中ajax

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

在某一page中進行調用json

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 的參數中獲取打開當前頁面路徑中的參數。api

8.onLaunch方法中的請求沒有執行完，首屏使用取不到值

在小程序中，我在onLaunch方法請求值並保存到globalData中，以後在首屏頁面的onLoad中使用。這時是找不到這個值的。由於請求是異步的，請求結果沒有返回，小程序就已經執行了onLoad方法。解決方法以下bash

使用啓動頁，在啓動頁獲取信息以後再打開首屏頁
使用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=>{
                    }
                })
            })
        })
    },
複製代碼