微信小程序入門(更新中)

微信小程序與普通網頁開發的區別

  1. 網頁開發渲染線程和腳本線程是一個進程。而小程序二者是分開的,分別運行在不同的線程。
  2. 網頁開發者可以操作DOM和BOM。小程序缺少操作DOM和BOM的方法。導致了JQ、Zepto等,在小程序中無法運行。
  3. 小程序的運行環境與nodejs環境也不相同,所以一些npm包在小程序中無法運行。
    • 從小程序基礎庫版本2.2.1開始支持使用npm安裝第三方包。

小程序開發流程

  1. 註冊小程序賬號

    爲了獲取AppID,AppID就像我們的身份證一樣,是唯一且很重要的,後續的所有開發流程都會基於這個AppID來完成。

    • 註冊方式:
      • 直接在微信小程序的官網註冊
      • 通過微信公衆號註冊
        • 條件是已經有微信公衆號(企業級,個人不可以)
        • 有點事如果公衆號已經認證過了,小程序不需要再次認證,省去了認證的時間和費用。
  2. 安裝開發者工具
  3. 開發、測試、上傳代碼(上傳到微信服務器)
  4. 提交審覈
  5. 發佈上線 發佈小程序以後,我們纔可以在微信中搜索到我們開發的小程序
  6. 錯誤查詢/性能監控 登陸官網 -> 開發 -> 運維中心

開發基礎

一、語法

數據綁定

  1. 內容
<view>{{title}}</view>
Page({
	data: {
		message: 'hello'
	}
})
  1. 屬性(需要在雙引號內)
<view id="{{id}}"></view>
Page({
	data: {
		id: '001'
	}
})
  1. 運算符
	<view hidden="{{flag ? true :  false}}"> Hidden </view>
  1. 其他
<view>{{"hello" + name}}</view>
<view>{{name}}{{age}}</view>

條件語句

  1. wx:if
  2. wx:elif
  3. 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的意思:爲了額列表中遍歷的每一個元素指定一個唯一的標識。當數據改變觸發渲染層重新渲染的時候,確保使組件保持自身狀態並提高列表渲染時的效率。
  1. 如果被遍歷的數組的元素是object,我們可以使用他的某一個值,這個值必須是不重複的數組或者字符串。
  2. 如果被遍歷的數組中的元素是數組或者字符串 *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 // 文件下載超時
		}
	}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章