一、開發前準備
申請賬號、安裝開發者工具
二、文件與目錄結構
1、程序主體:
app.js
app.json 程序配置
1.1、程序配置
pages 頁面路徑
window 頁面的窗口表現
tabBar 底部tab切換
networkTimeout
debug
{
"pages":[ //哪個寫在上面,哪個就是入口文件
"pages/index/index",
"pages/movie/movie",
"pages/logs/logs"
]
}
app.wxss 公共樣式
2、頁面:
index.js
index.json 頁面配置
2.1、頁面配置
window 頁面的窗口表現
index.wxss 頁面樣式
index.wxml 頁面結構
三、註冊程序與頁面
1、註冊app,只需要註冊一次,可以得到一個程序的實例,可以被其他頁面訪問
在其他頁面,通過getApp全局函數獲取應用實例 const app = getApp(); 獲取全局數據:app.gldData; //{a:1}
App({
gldData:{ a:1 },
onLaunch:function(){ //一運行小程序就會執行
//初始化代碼
}
})
2、註冊page,有幾個頁面,在每個頁面內都需要註冊
Page({
data:{
b:2
},
onLoad:function(){ //一進入頁面就會執行
console.log( this.data ) //{b:2} 通過this,獲取單個頁面內數據
}
})
四、程序生命週期
1、App
App({
//在小程序運行期間,只會執行一次
//程序銷燬之後(過了一段時間沒有運行或者手動刪除小程序),再次啓動小程序就會執行
onLaunch(){
console.log('小程序啓動時執行')
},
//每次從後臺切換出來就會執行
onShow(){
console.log('切換到小程序時執行')
},
//每次切換到後臺就會執行
onHide(){
console.log('小程序被隱藏在後臺時執行')
}
})
2、Page
Page({
//tab之間的切換,不會讓頁面重新加載,也不會卸載,只會讓頁面顯示與隱藏
//在進行NavigatorTo鏈接跳轉的時候,目標頁面會被加載onLoad,原始頁面會被隱藏onHide
//此時點擊導航條上的回退按鈕NavigatorBack,目標頁面會onShow,不會onLoad,原始頁面會被卸載onUnload
//頁面加載的時候執行,只會執行一次
onLoad(){ },
//頁面第一次渲染完成之後執行,只會執行一次
onReady(){ },
//頁面顯示就會執行,會執行多次,比如tab切換從a頁面切換到b頁面,那麼也就是等於b頁面顯示了
onShow(){ },
//頁面隱藏就會執行,會執行多次,比如tab切換從a頁面切換到b頁面,那麼也就是等於a頁面隱藏了
onHide(){ },
//頁面卸載的時候執行,只會執行一次
onUnload(){ },
})
五、數據與列表渲染
1、數據在index.js裏面的data裏面定義,
Page({
data:{ //數據類型,可以是字符串、數組、對象、數值等等
name:'kate'
}
})
要輸出到頁面上,直接就是<view>{{name}}</view>即可
2、渲染數組 wx:for wx:key
Page({
data:{
names:[ 'kate','jim','lily' ],
age:['1','2','3']
}
})
<view wx:for="{{names}}" wx:key="*this">{{item}}</view>
3、條件渲染 變量爲true,即滿足條件就進行渲染,反之就不進行渲染
<view wx:if="{{ score>60 && score<90 }}">等級B</view>
<view wx:elif="{{ score<60 && score>0 }}">等級C</view>
<view wx:else>等級A</view>
4、塊級渲染block,block是虛擬組件,不會出現在頁面上
同時顯示多個元素
<block wx:if="{{ score==80 }}">
<view>{{ name }}</view>
<view>{{ score }}</view>
<view>等級A</view>
</block>
<block wx:else>
<view>{{ name }}</view>
<view>{{ score }}</view>
<view>等級B</view>
</block>
5、使用模板
Page({
data:{
names:[ 'kate','jim','lily' ],
age:['1','2','3'],
score:80,
name:'aaa'
}
})
先定義模板:
<template name="myTemplate1">
<view>我是模板</view>
<view>{{name}}</view>
</template>
<template name="myTemplate2">
<block wx:for="{{age}}" wx:key="*this">
<view>{{item}}</view>
<view>啦啦啦</view>
</block>
</template>
<template name="myTemplate3">
<block wx:if="{{score==80}}">
<view>{{name}}</view>
<view>{{score}}</view>
<view>等級A</view>
</block>
<block wx:else>
及格
</block>
</template>
使用:
<view>
<template is="myTemplate1" data="{{name:'kate'}}"></template>
<template is="myTemplate2" data="{{age:age}}"></template>
<template is="myTemplate3" data="{{name,score}}"></template> //data="{{name,score}}等價於data="{{name:name , score:score}}
</view>
6、import與include
可以把模板定義在專門的template.wxml裏面
要使用裏面的模板,只需要在對應的wxml裏面
<import src="template.wxml" /> //import引入的模板,你需要在頁面上告知使用的是哪一個模板,<template is="myTemplate1" data="{{name:'kate'}}"></template>
<include src="template.wxml" /> //include引入模板,在頁面上什麼位置寫上,那麼模板代碼就在什麼地方顯示
六、事件
綁定事件
<view bind:tap="tabHandle" data-name="容器">
<text>點擊</text>
</view>
tabHandle(event){
//event:是事件對象,裏面有detail等屬性
//target:事件從哪裏觸發的
//currentTarget:事件在哪個上面執行的,通過event.currentTarget.dataset.name可以獲取到到"容器"這個自定義值
//比如點擊text,那麼target就是text,currentTarget是外面的view,因爲冒泡了,所以儘管點擊text,tabHandle事件仍然會觸發
}
如果要阻止事件冒泡,那麼就使用catch,而不是bind,如:
<view catch:tap="tabHandle">
<text>點擊</text>
</view>
這樣點擊text,tabHandle事件仍然會觸發,但是view上一級就不會冒泡上去了,因爲阻止冒泡了
七、樣式wxss
尺寸單位:rpx,只要設置寬度爲750rpx,那麼不管在什麼手機上都是佔滿一整個屏幕
引入樣式:@import '../style.wxss'
全局樣式與局部樣式:定義在 app.wxss 中的樣式爲全局樣式,作用於每一個頁面。在 page 的 wxss 文件中定義的樣式爲局部樣式,只作用在對應的頁面,並會覆蓋 app.wxss 中相同的選擇器。
八、微信小程序腳本語言wxs
不支持es6的語法,就當成es5的javascript
定義(寫在模板頁面內):
<wxs module="tool">
function createName(names){
return names.split(',')
}
module.exports = createName
//tool就表示導出的函數createName
</wxs>
使用:
<view wx:for="tool('1,2,3,4')">{{item}}</view>
也可以將wxs代碼寫在一個單獨的.wxs文件內,然後引入這個文件,類似於js
tool.wxs
function createName(names){
return names.split(',')
}
module.exports = createName
模板頁引入:<wxs src="tool.wxs" module="tool"></wxs>
使用:<view wx:for="tool('1,2,3,4')">{{item}}</view>
九、更新頁面data數據
data:{
number:1
}
onTap(){
this.data.number = 2; //錯誤
this.setData({
number:2; //正確
})
}
總結:使用setData可以更改data裏面的數據(同步更新),然後視圖也會更新(異步更新)
不是更改一個data,視圖就馬上更新,而且確定data不會更改之後,將所有更改的data一次性渲染到視圖(儘管是異步更新,時間間隔仍然很短)
十、組件
頁面由組件組成
view、text就是一個組件,只不過沒有樣式
看文檔學習微信小程序內置組件
https://developers.weixin.qq.com/miniprogram/dev/component/
十一、自定義組件
舉例說明:新建magicNumber.組件
首先:創建magicNumber.文件夾,裏面創建magicNumber.wxml、magicNumber.wxss、magicNumber.js和magicNumber.json文件
magicNumber.wxml文件:
<view class="pressBtn" id="view" data-name="容器">
{{nowIn}}
<view>{{magicNumber}}</view>
<text id="text" data-name="文字" bind:tap="onTap">點擊顯示magicNumber值</text>
</view>
magicNumber.json文件:
{
"component":true
}
magicNumber.js文件:
這裏是註冊組件,不是註冊頁面,所以不能是Page({}),而是:
Component({
properties:{
nowIn:String
},
data:{
magicNumber:Math.random(),
},
attached(){ //默認一上來就觸發一次getMagicNumber事件,這樣父組件監聽到觸發了,也會馬上觸發他的getMagicNumberHandle事件,所以一上來就默認更新了
this.triggerEvent('getMagicNumber',this.data.magicNumber)
},
methods:{ //子組件的事件寫在methods裏面
onTap(event){
this.setData({
magicNumber:Math.random()
})
this.triggerEvent('getMagicNumber',this.data.magicNumber) //第二個參數是傳到父組件的值
//子組件向父組件傳值,通過自定義事件,使用triggerEvent,告知父組件,該修改某個值了,點擊的時候,傳達一些信息過去,這裏傳過去this.data.magicNumber這個值,也可以傳遞對象過去,作爲第二個參數
console.log(event.currentTarget.dataset.name) //獲取到data-name="文字"裏面的"文字"
}
}
})
組件註冊完畢,接下來是在某個頁面進行使用
假如在index頁面使用,首先在index文件夾下面創建index.json文件,裏面配置:
{
"usingComponents": {
"magic-number":"/pages/magicNumber/magicNumber"
}
}
使用:index.wxml
<view class="container">
<magic-number now-in="首頁" bind:getMagicNumber="getMagicNumberHandle"></magic-number>
<view>{{num}}</view>
</view>
index.js
Page({
data:{
num:Math.floor(maN*1000)
},
getMagicNumberHandle(event){ //監聽子組件的getMagicNumber事件,一旦觸發了,馬上做出迴應
console.log(event.detail); 傳過來的信息可以通過【事件對象】event.detail獲取到
this.setData({
num:Math.floor(event.detail*1000) //這裏就是處理了從子組件拿到的值
})
}
})
十二、路由
兩種方式實現導航的跳轉
1、navigator內置導航組件
url:要跳轉的頁面地址
open-type:跳轉方式,有5種方式
navigate:默認跳轉方式
redirect:重定向
switchTab:跳到某個tab
navigateBack:回退
reLaunch:重加載
- 頁面切換,open-type="navigate"
index.html<view> <navigator url="/pages/about/about" open-type="navigate">About</navigator> <navigator url="/pages/movie/movie" open-type="navigate">Movie</navigator> <navigator url="/pages/logs/logs" open-type="switchTab">Logs</navigator> //tab切換 <navigator open-type="navigateBack">回退</navigator> //回退到上一個頁面 <navigator url="/pages/movie/movie" open-type="redirect">重定向到Movie</navigator> 上方有回退按鈕 <navigator url="/pages/movie/movie" open-type="reLaunch">reLaunch</navigator> 上方沒有回退按鈕 </view>
★logs屬於底部tab,不可使用navigate跳轉,只能使用下面的tab切換進行跳轉
2、api跳轉
wx.navigateTo(object) 跳轉到
wx.redirectTo(object) 重定向
wx.switchTab(object) 跳到某個tab
wx.navigateBack(object) 回退
wx.reLaunch(object) 重加載
about.wxml
<view bind:tap="goMovie">使用api跳轉到movie</view>
about.js
Page({
goMovie(){
wx.navigateTo({
url:'/pages/movie/movie'
})
}
})
十三、授權與用戶信息授權
- 獲取用戶暱稱、性別,頭像等等,需要在頁面上先放置一個button,即授權button,用戶點擊確認之後纔可以獲取用戶信息
1、通過按鈕來獲取用戶信息
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">獲取用戶信息</button>
如果開始用戶沒有點擊授權,會彈出一個彈框,用戶可以選擇授權或者不授權,點擊授權,通過回調函數onGetUserInfo,裏面有事件對象event,可以獲取到用戶的信息
2、通過普通點擊事件獲取
在用戶未授權過的情況下調用此接口,將不再出現授權彈窗,會直接進入 fail 回調。在用戶已授權的情況下調用此接口,可成功獲取用戶信息。所以,最好先使用button來獲取用戶信息
<button bind:tap="getUserInfo">獲取用戶信息</button>
getUserInfo(ev){
wx.getUserInfo({
success:(msg)=>{
console.log(msg)
},
fail:(err)=>{
console.log(err)
}
})
}
★通過普通點擊事件獲取用戶api,不會出現提醒授權彈框
- 獲取其他信息,如位置等等的,需要先調取wx.authorize(object)的api,獲取用戶的授權, 然後再調用相關的api,直接獲取信息,未授權先進行授權
案例:獲取用戶地理位置
<button bind:tap="getAuthorize">授權位置</button> //這時候,僅僅是得到用戶授權可以獲取地理位置,具體的信息還一無所知,需要通過其他的api來獲取最終的位置信息
getAuthorize(){
wx.authorize({
scope:'scope.userLocation',
success:(msg)=>{
console.log(msg)
},
fail:(error)=>{
console.log(error)
}
})
}
<button bind:tap="getLocation">獲取位置信息</button>
getLocation(){
wx.getLocation({
success:(msg)=>{
console.log(msg)
},
fail:(error)=>{
console.log(error)
}
})
}
<button bind:tap="getSetting">獲取授權信息</button> //查看哪些用戶信息已經授權可以使用
getSetting(){
wx.getsetting({
success:(msg)=>{
console.log(msg,'授權相關信息')
}
})
}
<button bind:tap="openSetting">打開授權信息面板</button> //用戶第一次拒絕授權地理位置等信息,
//後續授權確認彈框將不再出現,這裏可以手動打開授權信息面板,如圖所示,用戶手動設置完成之後回退回去,會執行下面的方法
openSetting(){
wx.opensetting({
success:(msg)=>{
console.log(msg,'設置相關信息完成')
}
})
}
十四、使用緩存
在movie頁面緩存數據
使用緩存,多個頁面從而可以共享一些數據,但是使用起來需要慎重
異步緩存數據:
<button bind:tap="onCache">緩存數據</button>
wx.setStorage({
key:'name', //緩存數據的鍵名
data:{ //可以是字符串或者對象
p1:'lin'
},
success:()=>{ //有回調函數,成功的時候才執行
console.log('存儲名字成功');
wx.getStorage({ //獲取緩存,可以同步或者異步
key:'name',
success:(data)=>{
console.log(data)
}
})
}
})
}
同步緩存數據:
wx.setStorageSync('names','kate');
let names = wx.getStorageSync('names');
console.log(names);
在about頁面獲取緩存數據,同步獲取緩存數據
{{name}}
<button bind:tap="getName">獲取name</button>
Page({
data:{
name:''
},
getName(){
let n = wx.getStorageSync('name');
console.log(n);
if(n){
this.setData({
name:n.p1
})
}
}
})
移除緩存的數據,同步移除
<button bind:tap="removeName">移除緩存的name</button>
removeName(){
wx.removeStorageSync('names');
}
十五、請求與反饋,類似ajax,axios
<view bind:tap = "goRequest"></view>
goRequest(){
wx.showLoading({ //一個loading動畫,請求成功了會消失,下面已經定義了
title:'請求中'
});
wx.request({
url:''www.baidu.com,
data:{ //給服務器傳遞請求數據
name:‘joe’
},
methods:'post', //默認是get請求
success:(res)=>{
console.log(res.data);
//請求成功的反饋
wx.showToast({
title:'請求已經成功'
})
//請求成功隱藏loading
wx.hideLoading();
},
fail:(e)=>{
wx.showToast({
title:e.errMsg
})
}
})
}
★詳情-不校驗域名合法域名
十六、微信小程序線上環境搭建
1、註冊並且登錄騰訊雲-解決方案-微信小程序-關聯賬號
2、上傳代碼
【總結】:
父組件向子組件傳值,通過properties傳值
子組件向父組件傳值,通過自定義事件,使用triggerEvent,告知父組件,該修改某個值了,點擊的時候,傳達一些信息過去,這裏傳過去this.data.magicNumber這個值,也可以傳遞對象過去,作爲第二個參數
零碎知識點
1、對象被轉爲字符串就變成了[ object object ]
2、VM1878:1 Component "pages/magicNumber/magicNumber" does not have a method "onTap" to handle event "tap".
一直顯示這個,因爲把methods寫在了data{}裏面,作死!!
3、微信開發者工具:清緩存可以清除用戶登錄信息