小程序開發(fā)指南 | 微信小程序官網(wǎng) | 微信開發(fā)者工具下載 | 小程序全局配置
如果對小程序一點都不熟悉的話滑沧，可以先到官網(wǎng)看文檔熟悉熟悉，這里主要是我在看官網(wǎng)文檔做項目的過程中的一些記錄戒洼，也是自己對基礎(chǔ)知識的一個鞏固，會不斷完善。對了嗦明，如果邏輯上沒有問題朋贬，但在微信開發(fā)者工具上就顯示不了預(yù)期的效果凯楔，那記得真機調(diào)試下，有時候真的就是微信開發(fā)者工具的bug锦募，親身經(jīng)歷摆屯。
一、微信開發(fā)者工具
- 編譯里可對頁面設(shè)置參數(shù)
- 點擊“上傳”可上傳到微信小程序后臺管理以進行發(fā)布體驗版或者正式版等糠亩。
- 如果小程序要求兼容到iOS8以下版本虐骑，需要開啟樣式自動補全。開啟樣式自動補全赎线，在“設(shè)置”—“項目設(shè)置”—勾選“上傳代碼時樣式自動補全”廷没。
- 右擊目錄選擇“新建pages和新建component”會自動生成對應(yīng)頁面
- 想看哪個頁面，就可以把app.json中pages里的那個頁面路徑移到第一個就可以
- app.wxss里的樣式為全局樣式垂寥，但不會應(yīng)用到components組件里
- 事件以bind或者catch開頭 + 事件類型颠黎。例如：bindtap、catchtouchstart...
二滞项、小程序后臺管理[需要賬號]
- 小程序名稱【發(fā)布前可修改2次】狭归、小程序簡稱【一年內(nèi)可修改2次】、小程序頭像【一年內(nèi)可申請修改5次】文判、小程序介紹【一個月可申請5次】过椎、服務(wù)類目【一個月可申請3次】
三、小程序相關(guān)知識點
1戏仓、通過App()注冊小程序疚宇，通過getApp()獲取全局對象
//app.js App()注冊一個小程序、小程序的入口方法【必須在app.js 中注冊柜去，且不能注冊多個】
App({
globalData: {
userInfo:null,
helloFromApp:'Hello,I am From App.js'
},
test:function(){
console.log('test');
}
})
// getApp()：通過getApp獲取全局對象灰嫉，然后進行全局變量和全局方法的使用
// 其他頁面中想調(diào)用全局變量和方法時
var app = getApp();
console.log(app.globalData.helloFromApp); // 調(diào)用全局變量
app.test();
2、生命周期
整個小程序生命周期 App({})
//app.js
App({
onLaunch: function (options) {
// 小程序初始化完成時（全局只觸發(fā)一次）
// 程序銷毀（過一段時間沒有執(zhí)行嗓奢，或者手動刪除了小程序后再次添加）之后讼撒，再次啟動就會執(zhí)行
console.log('onLaunch');
},
onShow: function (options) {
// 小程序啟動，或從后臺進入前臺顯示時
console.log('onShow');
},
onHide: function () {
// 小程序從前臺進入后臺時,就會執(zhí)行
console.log('onHide');
},
onError: function (msg) {
// 小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時觸發(fā)根盒，會帶上錯誤信息
console.log(msg)
},
globalData: {
userInfo: null
}
})
頁面生命周期 page({})
Page({
onLoad: function (options) {
// 監(jiān)聽頁面加載
// 頁面加載的時候執(zhí)行钳幅，只執(zhí)行一次
console.log('頁面load');
},
onReady: function () {
// 監(jiān)聽頁面第一次渲染完成
// 只執(zhí)行一次
console.log('頁面ready');
},
onShow: function () {
// 只要頁面顯示，就會執(zhí)行
console.log('頁面show');
},
onHide: function () {
// 頁面隱藏炎滞，就會執(zhí)行
console.log('頁面hide');
},
onUnload: function () {
// 頁面卸載敢艰，就會執(zhí)行
console.log('頁面unload');
}
})
注意:
- tab頁面之間的相互切換，不會讓頁面重新加載(onLoad)册赛，也就不會卸載(onUnload)钠导，只會隱藏與顯示頁面，即：頁面切換只會交替執(zhí)行 onHide() 與 onShow() 函數(shù)
- 在某頁面使用 NavigatorTo 跳轉(zhuǎn)至目標頁面時（比如從 index 頁面跳轉(zhuǎn)至 detail 頁面）森瘪，該頁面（index頁面）只執(zhí)行 onHide(), 目標頁面（detail頁面）執(zhí)行 onLoad()牡属、onReady()、onShow()扼睬；
- 在回退（NavigatorBack）時（比如從 detail 頁面回退至 index 頁面）逮栅，index頁面執(zhí)行onShow(), detail頁面會被卸載，即執(zhí)行onUnload()窗宇；
3措伐、路由
- wx.navigateTo, wx.redirectTo 只能打開非 tabBar 頁面。
- wx.switchTab 只能打開 tabBar 頁面军俊。
- reLaunch可以打開任意頁面, 但是沒有返回按鈕侥加，需要定義一個可以點擊回退的按鈕。
- 頁面底部的 tabBar 由頁面決定蝇完，即只要是定義為 tabBar 的頁面官硝，底部都有 tabBar。
- 調(diào)用頁面路由帶的參數(shù)可以在目標頁面的onLoad中獲取短蜕。
- 路由傳參
<!-- pages/list/list.wxml -->
<view class="list" >
<view class='box' wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
<image src='{{item.img}}'></image>
<view class='tip'>
<text>{{item.title}}</text>
<text class='price'>￥{{item.price}}</text>
</view>
</view>
</view>
//pages/list/list.js
goDetail (e) {
console.log(e.currentTarget.dataset.id),
// 進入詳情頁時 傳遞 id
wx.navigateTo({
url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
})
},
// pages/detail/detail.js
Page({
data: {
detail: {},
loading: true
},
onLoad: function (options) {
console.log(options.id) // 拿到列表頁傳過來的 id
}
})
4氢架、布局-flex
/* flex不單是一個屬性，它包含了一套新的屬性集朋魔。屬性集包括用于設(shè)置容器岖研，和用于設(shè)置項目兩部分 */
/* 設(shè)置容器的屬性有: */
display:flex;
flex-direction:row（默認值） | row-reverse | column |column-reverse
flex-wrap:nowrap（默認值） | wrap | wrap-reverse
justify-content:flex-start（默認值） | flex-end | center |space-between | space-around | space-evenly
align-items:stretch（默認值） | center | flex-end | baseline | flex-start
align-content:stretch（默認值） | flex-start | center |flex-end | space-between | space-around | space-evenly
/* 設(shè)置項目的屬性有 */
order:0（默認值） | <integer>
flex-shrink:1（默認值） | <number>
flex-grow:0（默認值） | <number>
flex-basis:auto（默認值） | <length>
flex:none | auto | @flex-grow @flex-shrink @flex-basis
align-self:auto（默認值） | flex-start | flex-end |center | baseline| stretch
5、數(shù)據(jù)存儲
- 每個小程序的緩存空間上限為10MB警检，如果當前緩存已經(jīng)達到10MB孙援，再通過wx.setStorage寫入緩存會觸發(fā)fail回調(diào)
6、組件使用
官網(wǎng)自定義組件介紹 | 看到寫的比較詳細的自定義組件
四扇雕、小程序常用功能
- 上傳圖片：wx.uploadFile
//從本地相冊選擇圖片或使用相機拍照拓售。
wx.chooseImage({
success (res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
//僅為示例，非真實的接口地址
url: 'https://example.weixin.qq.com/upload',
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data
//do something
}
})
}
})
有時候調(diào)用wx.uploadFile會提示“fail url not in domain list”镶奉，是因為沒有勾選“不校驗合法域名础淤、web-view（業(yè)務(wù)域名）崭放、TLS 版本以及 HTTPS 證書”
如果未勾選的話，需要在后臺配置合法域名
- 更新機制
//放在了app.js的onLaunch方法里了,發(fā)布的第一版不會生效鸽凶，下一版才會生效的
// 獲取小程序更新機制兼容
//wx.canIUse 判斷小程序的API币砂，回調(diào)，參數(shù)玻侥，組件等是否在當前版本可用
if (wx.canIUse('getUpdateManager')) {
const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
// 請求完新版本信息的回調(diào)
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
wx.showModal({
title: '更新提示',
content: '新版本已經(jīng)準備好决摧，是否重啟應(yīng)用？',
success: function (res) {
if (res.confirm) {
// 新的版本已經(jīng)下載好凑兰，調(diào)用 applyUpdate 應(yīng)用新版本并重啟
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
// 新的版本下載失敗
wx.showModal({
title: '已經(jīng)有新版本了喲~',
content: '新版本已經(jīng)上線啦~掌桩，請您刪除當前小程序，重新搜索打開喲~',
})
})
}
})
} else {
// 如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦蚱币。梢赃@樣子提示
wx.showModal({
title: '提示',
content: '當前微信版本過低拘鞋，無法使用該功能，請升級到最新微信版本后重試矢门。'
})
}
- 直接獲取微信頭像
<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
- 微信掃一掃功能
wx.scanCode({
success: (res) => {
console.log(res)
}
})
- 利用wx.getNetworkType獲取網(wǎng)絡(luò)狀態(tài)
wx.getNetworkType({
success: function(res) {
// networkType字段的有效值：
// wifi/2g/3g/4g/unknown(Android下不常見的網(wǎng)絡(luò)類型)/none(無網(wǎng)絡(luò))
if (res.networkType == 'wifi') {
// 從網(wǎng)絡(luò)上下載pdf文檔
wx.downloadFile({
url:'http://test.com/somefile.pdf',
success: function (res) {
// 下載成功之后進行預(yù)覽文檔
wx.openDocument({filePath: res.tempFilePath})
}
})
} else {
wx.showToast({ title: '當前為非Wifi環(huán)境' })
}
}
})
- 小程序跳轉(zhuǎn)到其他小程序【最多允許填寫 10 個,需要適應(yīng)跳轉(zhuǎn)小程序的appid】 去官網(wǎng)了解詳情
wx.navigateToMiniProgram({
appId: '',
path: 'page/index/index?id=123',
extraData: {
foo: 'bar'
},
envVersion: 'develop',
success(res) {
// 打開成功
}
})
