【學習】微信小程序開發

---

1. 下載編輯器

百度搜索微信小程序，在開發者工具裏面下載即可。

安裝完畢之後創建一個小程序項目，選擇測試ID。

2. 項目目錄

app.json

• pages：用於登記註冊頁面，小程序按照pages中的頁面順序進行展示
  .wxml ：html的封裝版本，支持原生html或者wx的一些自定義標籤
  .wxss：css的封裝版本，支持原生css或者wx的一些自定義標籤
  .js：定義數據等js使用方式，用法有點像vue

3. 組件

這裏的組件，就是wxml標籤

view
類似於div+p標籤，塊級標籤

text
類似於span，行級標籤

屬性：

• selectable 長按字能夠被選中
• decode 對&nbsp等轉義字符進行轉義

rich-text
用於展示帶html原生標籤

xx.json中

Page({
	data: {
		msg:"<h1>Hello</h1>"
	}，
})

wxml中

<rich-text nodes="{{msg}}">
</rich-text>

button
屬性type用於調整樣式，包括warn等通用樣式。

綁定事件：

Page({
	data: {
	}，
	// 直接在這裏聲明方法
	clickMe(){
		console.log("點擊我");
	},
})

wxml中

<button bindtap="clickMe"></button>

屬性：一鍵聯繫客服

<button open-type="contact">
聯繫客服
</button>

屬性：獲取當前用戶信息

<button open-type="getUserInfo" bindgetUserInfo="getUserInfo">
獲取用戶信息
</button>

 getUserInfo(e){
    console.log(e);
  },

將getUserInfo全部改爲getPhoneNumber即可用戶獲取手機號

4. 指令

取值：
this.data.msg

賦值：
在方法中：
this.setData({
msg: “World”
})

組件的使用：

<button bindtap="toast"></button>

toast(){
	wx.showToast({
		title:'成功',//彈窗顯示，可省略
		icon:'success',//彈窗類型
		duration:2000 //彈窗時間  毫秒
	})
}

更多組件查看官方

網頁跳轉：

跳轉到首頁，相當於a標籤
<navigator url="../index/index">跳轉</navigator>

通過按鈕方法跳轉
<button bindtap="goIndex">跳轉</button>

goIndex(){
	wx.navigatorTo({
		url:'../index/index'
	})
}

函數傳參：
使用data-參數名 的屬性形式傳遞

<button bindtap="test" data-id="1">傳遞參數id</button>

test(e){
	console.log(e)
}

e是一個大的對象，在e.currentTarget.dataset中保存着傳遞過來的參數

循環：
data中有個數組arr

<view wx:for="{{arr}}" wx:key="username">{{item}}</view>

item是默認的單個對象，可以通過item.username訪問嵌套對象
可以通過以下方式改變item的命名

<view wx:for="{{arr}}" wx:for-item="user" wx:key="username">{{user}}</view>

wx:key=“username”,key用於定位複選框

5. 前後端交互

<button bindtap="getData">從後端獲取數據</button>

getData({
	wx.request({
		url:'https://localhost:8080/api/users/get/1',
		success:(res)=>{
			console.log(res);
		}
	})
})