老前端出坑小程式（一）

此方泉愛學習發表於2019-03-28
前端

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

相關文章