微信小程式例項--知乎日報小程式
阿新 • • 發佈:2019-01-02
微信小程式開發文件
使用步驟
- 下載微信小程式開發工具
- 微信小程式註冊申請 ,獲取AppID(手機預覽需用到)
- 伺服器配置 ,新增合法域名,每個月只可修改3次 ,可新增多個域名
- 下載開發工具後建立專案,輸入申請的AppID,填寫專案名稱,匯入該工程
- 專案預覽體驗
專案效果圖:
必須掌握的幾個知識點
目錄
小程式配置
- app.json檔案小程式設定全域性配置 ,包括頁面路徑、視窗、選項卡,以及網路超時等
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText" : "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁"
}, {
"pagePath": "pages/logs/logs",
"text": "日誌"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
- 通過appapp.js檔案中App()來註冊一個小程式 提供了生命週期方法
App({
onLaunch: function (){
// Do something initial when launch.
},
onShow: function(){
// Do something when show.
},
onHide: function(){
// Do something when hide.
},
globalData: 'I am global data'
})
通過全域性的getApp()函式,獲取小程式例項
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意:
App() 必須在 app.js 中註冊,且不能註冊多個。
不要在定義於 App() 內的函式中呼叫 getApp() ,使用 this 就可以拿到 app 例項。
不要在 onLaunch 的時候呼叫 getCurrentPage(),此時 page 還沒有生成。
通過 getApp() 獲取例項之後,不要私自呼叫生命週期函式。
- 通過Page() 函式用來註冊頁面
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options){
// Do some initialize when page load.
},
onReady: function(){
// Do something when page ready.
},
onShow: function(){
// Do something when page show.
},
onHide: function(){
// Do something when page hide.
},
onUnload: function(){
// Do something when page close.
},
onPullDownRefresh: function(){
// Do something when pull down.
},
onReachBottom: function(){
// Do something when page reach bottom.
},
// Event handler.
viewTap: function(){
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
小程式常用API介面
- wx.request https網路請求
wx.request({
url: 'test.php', //僅為示例,並非真實的介面地址
method:"GET",
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
- 本地快取
通過key的形式新增快取setStorage (非同步介面)
wx.setStorage({
key:"key"
data:"value"
})
通過key的形式獲取快取getStorage (非同步介面)
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
從本地快取中非同步移除指定 key
wx.removeStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
清理本地資料快取
wx.clearStorage()
- 顯示、隱藏訊息提示框
wx.showToast({
title: '載入中',
icon: 'loading',
duration: 10000
})
setTimeout(function(){
wx.hideToast()
},2000)
- 動態設定當前頁面的標題
wx.setNavigationBarTitle({
title: '當前頁面'
})
- 導航
保留當前頁面,跳轉到應用內的某個頁面
wx.navigateTo({
url: 'test?id=1'
})
關閉當前頁面,跳轉到應用內的某個頁面
wx.redirectTo({
url: 'test?id=1'
})
- 獲取使用者資訊,需要先呼叫 wx.login 介面
wx.getUserInfo({
success: function(res){
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性別 0:未知、1:男、2:女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})
- 裝置
獲取網路型別
wx.getNetworkType({
success: function(res) {
var networkType = res.networkType // 返回網路型別2g,3g,4g,wifi
}
})
獲取系統資訊(非同步介面)
wx.getSystemInfo({
success: function(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
}
})
撥打電話
wx.makePhoneCall({
phoneNumber: '1340000' //僅為示例,並非真實的電話號碼
})
- 獲取當前的地理位置、速度
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})