小程式的初體驗

作者：毛蘢瑋 / Saint

掘金：juejin.im/user/5aa1f8…

微博：weibo.com/5458277467/…

GitHub ：github.com/saint-000

專案篇：一款收集使用者需求和對接物品清洗市場的小程式名稱：好行頭目的：第一階段的前端佈局，美化頁面和排版，適應小程式開發工具.

知識點：

（圖上舉例部分）

①【1】App（）函式用來註冊小程式，需要在app.js中註冊，不能註冊多個.

//app.js
App({
onLaunch: function () {
// 展示本地儲存能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

// 登入
wx.login({
success: res => {
// 傳送 res.code 到後臺換取 openId, sessionKey, unionId
}
})
// 獲取使用者資訊
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 傳送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo

// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
複製程式碼

①【2】app.js內申明變數和函式只在該檔案中有效，不同檔案中相同變數不會相互影響。我們可以通過全域性函式getApp（）獲取全域性. 在app.js寫

//app.js
App({
globalData: {
userInfo: null,
}
})

設定資料
app.globalData.userInfo = result;

獲取資料
this.setData({
userInfo: getApp().globalData.userInfo
});

複製程式碼

②【1】Page()函式用來註冊小程式中的頁面：例如首頁，分類，本地等頁面

②【2】Page()函式有以上9中屬性，Data型別為Object,其他型別為Fuction，還有其他屬性可以新增函式在Object裡，用This呼叫. data:{ a: 1, message:"hhh" },

要注意在wxml上呼叫JS內的Data動態資料的時候用{{}}形式，JS內的動態資料與變數間用：關聯，此外字串型別加引號.

②【3】條件渲染：通過wx：if=“{{條件}}”來判斷渲染，通過JS傳送資料跟條件進行判斷實現前臺顯示與否，注意條件判斷整個要放進{{}}裡面，例如：“{{a+b>2}}”；條件判斷也可用wx：elif和wx：else.

②【4】OnShareAppMessage的用法

* 使用者點選右上角分享
onShareAppMessage: function () {}
複製程式碼

自定義分享程式碼：

顧名思義onShareAppMessage有兩項功能:分享小程式文字【title】；分享小程式某個頁面【path】 .

②【4】列表渲染：wx：for=“{{}}”提醒一下就是在陣列中index是當前陣列元素下標值，item是當前陣列元素值；舉例:[A]3=4陣列中，wx：for-index=3，wx：for-item=4.

舉例：用陣列構成乘法表 {{i}}{{j}}={{ij}}

③引用：import和include皆可以引用，import引用其他檔案內的函式，直接套用之前定義好的模板；include是匯入檔案中的大部分程式碼，template/>程式碼內容不匯入 .

//index.wxml
<template name="函式的名稱"><text>{{text}}</text></template>
複製程式碼

第一步先確定是否會多次用到某個函式；第二步在當前路徑.WXML檔案內template定義某個函式名稱以及內容；第三步在其他的頁面路徑.WXML檔案下引用之前定義的函式.

//test.wxml
<import src="../index/index.wxml"></import>
<template is="item" data="{{text:hello}}"></template>
複製程式碼

（千萬注意路徑，小編我就是在這裡摔倒的...WTF）

先就寫到這裡，小編還在上學，上述文章有錯誤之處還請各位多多指出，覺得好的朋友可以關注我的掘金和微博哦~

小程式的初體驗

相關文章