微信小程序與普通網頁開發的區別
- 網頁開發渲染線程和腳本線程是一個進程。而小程序二者是分開的,分別運行在不同的線程。
- 網頁開發者可以操作DOM和BOM。小程序缺少操作DOM和BOM的方法。導致了JQ、Zepto等,在小程序中無法運行。
- 小程序的運行環境與nodejs環境也不相同,所以一些npm包在小程序中無法運行。
- 從小程序基礎庫版本2.2.1開始支持使用npm安裝第三方包。
小程序開發流程
- 註冊小程序賬號
爲了獲取AppID,AppID就像我們的身份證一樣,是唯一且很重要的,後續的所有開發流程都會基於這個AppID來完成。
- 註冊方式:
- 直接在微信小程序的官網註冊
- 通過微信公衆號註冊
- 條件是已經有微信公衆號(企業級,個人不可以)
- 有點事如果公衆號已經認證過了,小程序不需要再次認證,省去了認證的時間和費用。
- 註冊方式:
- 安裝開發者工具
- 開發、測試、上傳代碼(上傳到微信服務器)
- 提交審覈
- 發佈上線 發佈小程序以後,我們纔可以在微信中搜索到我們開發的小程序
- 錯誤查詢/性能監控 登陸官網 -> 開發 -> 運維中心
開發基礎
一、語法
數據綁定
- 內容
<view>{{title}}</view>
Page({
data: {
message: 'hello'
}
})
- 屬性(需要在雙引號內)
<view id="{{id}}"></view>
Page({
data: {
id: '001'
}
})
- 運算符
<view hidden="{{flag ? true : false}}"> Hidden </view>
- 其他
<view>{{"hello" + name}}</view>
<view>{{name}}{{age}}</view>
條件語句
- wx:if
- wx:elif
- wx:else
<view wx:if="{{a > 5}}">6</view>
<view wx:elif="{{a < 5}}">4</view>
<view wx:else">5</view>
for循環
- wx:for
- 默認數組的當前項的下表變量名默認爲index,數組當前項的變量默認爲item
- 使用 wx:for-item 可以指定數組當前元素的變量名
- 使用 wx:for-index 可以指定數組當前下標的變量名
- wx:for 可以嵌套
- wx:key的意思:爲了額列表中遍歷的每一個元素指定一個唯一的標識。當數據改變觸發渲染層重新渲染的時候,確保使組件保持自身狀態並提高列表渲染時的效率。
- 如果被遍歷的數組的元素是object,我們可以使用他的某一個值,這個值必須是不重複的數組或者字符串。
- 如果被遍歷的數組中的元素是數組或者字符串 *this達標在for循環中item本身。
- 舉例:
假設有數據和視圖分別爲:
data: {
str: 'abcdefg',
lesson: [
{
id: 0,
image: './0.png',
},
{
id: 1,
image: './1.png',
},
{
id: 2,
image: './2.png',
}
]
},
<view wx:for="{{leeson}}" wx:key="id">
注意:上面的wx:key的值爲對應的屬性,直接寫屬性的名稱key即可,只要這個key是唯一標識
{{item}}{{index}}
</view>
<view wx:for={{str}} wx:key="*this">
注意:如果遍歷的是字符串,那麼可以使用*this來作爲唯一標識
{{item}}{{index}}
</view>
<view wx:for={{str}} wx:key="*this" wx:for-item="s" wx:for-index="n">
注意:如果想更改默認每項的變量item,可以使用wx:for-item="{{s}}",這樣s就能代替item了,同理,如果想更改每項的索引index,可以使用wx:for-index="n",這樣n就能代替index了。
{{s}}{{n}}
</view>
block組件
容器的作用,在頁面渲染的時候,不會顯示block標籤,類似react的<></>
<block>
...
</block>
事件、事件綁定和事件對象
事件對象可以攜帶額外信息,如id,dataset
-
事件
- touchstart 手指觸摸動作開始
- touchmove 手指觸摸後移動
- touchcancel 手指觸摸動作被打斷,如來電提醒,彈窗
- touchend 手指觸摸動作結束
- tap 手指觸摸後馬上離開
- longpress 手指觸摸後,超過350ms在離開,如果指定了時間回調函數並處罰金了這件事,tap事件將不被觸發
- longtap 手指觸摸後,超過350ms再離開(推薦使用longpress事件代替)
- transitionend 會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
- animationstart 會在一個 WXSS animation 動畫開始時觸發
- animationiteration 會在一個 WXSS animation 一次迭代結束時觸發
- animationend 會在一個 WXSS animation 動畫完成時觸發
- touchforcechange 在支持 3D Touch 的 iPhone 設備,重按時會觸發
-
事件分類
- 冒泡事件
- 非冒泡事件
-
事件綁定
- 寫法:key、value的形式 ,value不用寫()
- key 以 bind 或 catch開投,然後跟上事件的類型,如bindtap、catchtap
bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡
- 事件對象
- type 代表事件的類型
- timeStamp 頁面打開到觸發事件所經過的毫秒數
- target 觸發事件的源組件
- currentTarget 事件綁定的當前組件
data-xxx自定義屬性的大小寫問題
- data-info 屬性是info
- data-inFo 屬性是info
- data-in-fo 屬性是inFo
開發進階
路由
- wx.navigateBack 返回
- wx.switchTab 跳轉到tabbar的頁面
- wx.navigateTo 跳轉到另一個頁面
- wx.reLaunch 關閉其他所有頁面,只跳轉到某一個頁面
- wx.redirectTo 關閉當前的頁面,但不允許關閉tabbar的頁面
開發高級
一、獲取用戶授權(信息)
1.直接在頁面展示用戶信息,但不能在js獲取到用戶數據
- 使用open-data內置組件,type屬性表示需要展示的用戶信息類型,比如頭像,暱稱等。具體有哪些用戶信息,參考文檔。
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
2.在js獲取用戶信息
- 微信要求button點擊後纔可以獲取,所以需要有一個按鈕,並且在按鈕上綁定open-type="getUserInfo"屬性和屬性值,同時,通過bindgetuserinfo事件來獲取用戶信息
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
getUserInfo: (event) => {
if (e.detail.errMsg === "getUserInfo:ok") {
this.setData({
userAvatarPic: e.detail.userInfo.avatarUrl,
userNickName: e.detail.userInfo.nickName,
})
} else {
console.log("授權失敗");
}
}
- 當然,如果用戶已經授權過,那麼一開始進入頁面,就可以調取接口獲取到是否已經授權,如果授權,則獲取用戶信息。
- 在這裏,我們可以在onLoad聲明周期函數中通過wx.getUserInfo調取用戶信息
Page({
/**
* 頁面的初始數據
*/
data: {
userAvatarPic: "",
userNickName: '',
},
onLoad: (options) => {
wx.getUserInfo({
success: (res) => {
this.setData({
userAvatarPic: res.userInfo.avatarUrl,
userNickName: res.userInfo.nickName,
})
}
})
},
})
- 也可以通過wx.getSetting接口來判斷是否已經授權
- res.authSetting[‘scope.userInfo’]爲true表示已經授權。
Page({
onLoad: (options) => {
wx.getSetting({
success: (res) => {
if(res.authSetting['scope.userInfo']){
console.log('已經授權,可以顯示用戶信息');
}else{
console.log("尚未授權,顯示授權按鈕");
}
}
})
}
})
tabbar的配置
- 在app.json中配置tabbar
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/my/my"
],
"tabBar": {
"color": "#7a7e83", // 未被選中時的文字顏色
"selectedColor": "#e94840", // 被選中時的文字顏色
"borderStyle": "black", // tabbar上邊框的顏色,僅支持black/white
"position": "bottom", // tabber位置,僅支持bottom/top,默認bottom,當爲top時,不顯示圖標
"backgroundColor": "#fff", // 菜單背景色
"list": [{// 這個list,也就是tabbar的菜單限制爲2-5個,包含2和5
"pagePath": "pages/home/home",
"text": "首頁",
"iconPath": "", // icon路徑
"selectedIconPath": "" // 選擇了icon的路徑
},{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "",
"selectedIconPath": ""
}]
}
}
頭部導航樣式配置
- 在app.json文件中,配置一個window屬性
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/my/my"
],
"window": {
"navigationBarBackgroundColor": "#ffffff", // 頂部導航條的背景顏色
"navigationBarTextStyle": "black",// 頂部導航文字的顏色,只有black/white兩種顏色
"navigationBarTitleText": "無止課堂",// 頂部導航的標題
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
}
- 特別注意:頁面的json文件,能配置window屬性,其他pages,tabbar都是不可以的,並且寫window的配置時候,不用寫window,直接寫屬性即可,例如
{
"navigationBarBackgroundColor": "#ef2046",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "個人中心",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}
網絡超時設置
- 在app.json中,配置networkTimeout屬性
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/my/my"
],
"newtworkTimeout": { // 默認都是20s
"request": 20000, // 請求超時
"connectSocket": 20000, // 連接超時
"uploadFile": 20000, // 文件上傳超時
"downloadFile": 20000 // 文件下載超時
}
}