微信小程式入門（登入頁面）
阿新 • • 發佈：2019-02-02
1.首先前往開發者工具下載安裝開發工具：
2.安裝後微信掃碼，並填寫自己的AppID選擇自己的專案目錄後登入：
登陸後點擊工具上的編譯按鈕，可以在工具的左側模擬器介面看到這個小程式的表現，也可以點選預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小程式。
3.程式碼構成：可以看到在專案的根目錄有一個 app.json 和 project.config.json，在app.json中是對當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等，內容如下：
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
project.config.json的作用：你在工具上做的任何配置都會寫入到這個檔案，當你重新安裝工具或者換電腦工作時，你只要載入同一個專案的程式碼包，開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置，其中會包括編輯器的顏色、程式碼上傳時自動壓縮等等一系列選項。內容如下：
{ "description": "專案配置檔案。", "packOptions": { "ignore": [] }, "setting": { "urlCheck": true, "es6": true, "postcss": true, "minified": true, "newFeature": true }, "compileType": "miniprogram", "libVersion": "2.0.4", "appid": "wx9cff9d70e4813ce5", "projectname": "page", "isGameTourist": false, "condition": { "search": { "current": -1, "list": [] }, "conversation": { "current": -1, "list": [] }, "game": { "currentL": -1, "list": [] }, "miniprogram": { "current": -1, "list": [] } } }
4.app.js（互動邏輯）響應使用者的點選、獲取使用者的位置等等。在小程式裡邊，我們就通過編寫 JS 指令碼檔案來處理使用者的操作。本js中寫的是獲取微信的頭像，顯示資訊（hello word！）以及點選它們時所觸發的事件，程式碼如下：
//app.js App({ onLaunch: function () { // 展示本地儲存能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登入 wx.login({ success: res => { // 傳送 res.code 到後臺換取 openId, sessionKey, unionId } }) // 獲取使用者資訊 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框 wx.getUserInfo({ success: res => { // 可以將 res 傳送給後臺解碼出 unionId this.globalData.userInfo = res.userInfo // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回 // 所以此處加入 callback 以防止這種情況 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null } })
下面在page中再建一個login目錄用來寫登入頁面，login.xml中寫頁面的模板，相當於html：
<!--pages/login/login.wxml-->
<view class='container'>
<view class='header'>
<text>學生評教系統</text>
</view>
<form bindsubmit="formSubmit">
<view class='section'>
<text>學號：</text>
<input type='number' placeholder='請輸入學號' name="no" value='1635050238'/>
</view>
<view class='section'>
<text>密碼:</text>
<input password='true' placeholder='請輸入密碼' name="pwd" value='123456'/>
</view>
<view class='button'>
<button type='primary' form-type='submit'>登入</button>
</view>
</form>
<view class='fpwd' bindtap='findpwd'>
<text>忘記密碼</text>
</view>
</view>
在login.wxss中寫模板的樣式，相當於css：
/* pages/login/login.wxss */
form{
width: 310px;
height: 240px;
line-height: 40px;
/* border: 1px solid red; */
}
input{
border: 1px solid #ccc;
width: 310px;
height: 40px;
}
.button{
margin-top: 20px;
}
.header text{
font-size: 25px;
color: #666;
}
form text{
font-size: 20px;
color: #666;
}
.fpwd{
margin-top: 200px;
}
.fpwd text{
color: #ccc;
font-size: 18px;
}login.js中寫當點選登陸時所觸發的事件：
// pages/login/login.js
Page({
/**
* 頁面的初始資料
*/
data: {
},
formSubmit: function (e) {
// console.log(e.detail.value);
wx.request({
// url: 'https://www.lishuming.top/pj/index.php/student/api/login', //僅為示例，並非真實的介面地址
url: app.globalData.url.login,
data: {
username: e.detail.value.no,
password: e.detail.value.pwd
},
header: {
'content-type': 'application/json' // 預設值
},
success: function (res) {
console.log(res.data);
if (res.statusCode == 200) {
//訪問正常
if (res.data.error == true) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000,
})
} else {
//快取
wx.setStorage({
key: "student",
data: res.data.student
});
wx.showToast({
title: "登陸成功",
icon: 'success',
duration: 20000,
success: function () {
setTimeout(function () {
wx.switchTab({
url: '../teachers/teachers',
})
}, 2000)
}
})
}
}
}
})
}
})頁面顯示：
