最近看了一下HBuilderX(一款支援HTML5的Web開發IDE),簡單來說就是支援一套程式碼可以跑android、ios和微信小程式的編寫工具。看了一下他官網的案例，整體來說還算不錯。就是官方文件比較簡陋。很多坑需要自己一步一步填。網上唯一一個視訊教程還是在騰訊課堂（88元），大致看了一下他的目錄，但是我沒有買。

注意前方高能！！！！！！！！！

登入頁面

由此可以看到我們可以看到可以正常訪問資料介面，拿到返回資料

總結一下，這個例項只要運用了一下幾個知識點（訊息提示，資料訪問，解析資料，儲存本地，事件繫結，跳轉頁面，onload事件）

登入事件繫結

<button type="primary" @tap="btn">登入</button>

事件處理

btn() {
				if (this.username.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '請輸入使用者名稱'
					});
					return;
				}
				if (this.pwd.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '請輸入密碼'
					});
					return;
				}
 

網路請求

uni.request({
					url: 'http://192.168.100.55:54723/ZycfService/login/login', //僅為示例，並非真實介面地址。
					data: {
						username: this.username,
						pass: this.pwd
					},success: (res) => {
						
						let list=JSON.stringify(res.data);
						console.log("返回資料狀態:" + list);
						if(list=="[]"){
							uni.showToast({
								icon: 'none',
								title: '使用者名稱或密碼錯誤'
							});
							return;
						}

                        uni.showToast({
							icon: 'none',
							title: '登入成功'
						});
                },fail: () => {
						uni.showToast({
							icon: 'none',
							title: '網路異常,請稍後重試'
						});
					}
 

解析資料，儲存本地

                        let list=JSON.stringify(res.data);
						console.log("返回資料狀態:" + list);
						if(list=="[]"){
							uni.showToast({
								icon: 'none',
								title: '使用者名稱或密碼錯誤'
							});
							return;
						}
						const data=res.data;
						self.lists=data;
						// console.log("返回資料狀態:" + JSON.stringify(res));
						
						console.log("返回資料狀態:" + self.lists[0]['rolename']);
						
						uni.setStorage({
							key:'userinfo',
							data:{
								bh:self.lists[0]['bh'],
								rolename:self.lists[0]['rolename'],
								username:self.lists[0]['username']
								
							}
						})

跳轉頁面

uni.navigateTo({
							url: '../home/home',
						});

首頁取出資料

onLoad() {
			//首先將例項指標儲存到全域性變數 self 方便在非同步請求中訪問例項本身
			self = this;
			uni.getStorage({
				key: 'userinfo',
				success: function(res) {
					const listdata = res.data;
					self.list = listdata;
					console.log("資料是:" + self.list.username)
				}
			});

以上就是登入例項的所有實現點，下面附上demo下載地址不包括後臺介面