python+selenium自動化我比較喜歡，但是今天先不談這個，因為昨天晚上碰巧初次接觸了一下微信小程式開發，有點感想，先記錄一下，
我發覺寫筆記是一個很不錯的習慣，希望朋友們也能喜歡寫筆記，因為筆記是一個心路歷程，也是一種能力提升，更是時光的留影，等我們以后都變成了老頭，老婆子后，會發現年輕也有奮斗的一面，不是得過且過，
廢話了一堆，我們回歸正題：我們的微信小程式.....
微信小程式體現在一個小字，不像app那么臃腫，微信小程式說實在我還真比較喜歡，主要原因：為我們手機減負，程式在云端，本地不用再安裝一堆APP，我們能體會到手機的喜悅之心：“終于可以減肥了，手機的青春來了”，
下面我們來說下簡單的微信小程式開發，
一、結構組成
微信小程式開發分為兩部分：前端開發和后端開發，其實有點廢話，做過web開發的都知道這個，
前端：微信小程式，簡單一點類似于瀏覽器，
后端：實作業務的核心功能，這里可以采用不同的實作技術，如，java語言實作的，php語言實作的，python語言實作的等，
前端架構：我這里直接上個截圖（來源官方檔案），一步了然
二、實作原理
類似瀏覽器：
1、瀏覽器發起請求
2、服務端接收請求并解釋
3、回傳給瀏覽器
4、瀏覽器解釋并呈現
微信小程式：
1、發起請求，會js的朋友發現，是不是很像ajax啊，呵呵呵，，，，
2、服務端接收并決議
3、回傳資料，如Json結構資料，xml結構資料等
4、通過系結方式顯示到微信小程式上
三、微信小程式主體檔案介紹
app.js檔案：app.js 呼叫 App 方法注冊小程式實體，系結生命周期回呼函式、錯誤監聽和頁面不存在監聽函式等，全域唯一的 App 實體
app.json 檔案：小程式根目錄下的 app.json 檔案用來對微信小程式進行全域配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等，
app.wxss檔案：WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，
四、微信小程式頁面介紹
前面介紹了微信小程式的主體，是不是這就完了？不是的，這正是微信小程式的一個基本框架，微信小程式想要體現價值，首先一步還要表現出來才行，這不頁面就出場了，
每個頁面都被定義為一個完整的模塊，都統一了完整的風格，
js檔案：實作業務邏輯
wxml檔案：實作頁面布局
json檔案：實作業務資料配置
wxss檔案：實作頁面美化
五、微信小程式的開發
前面做了一堆介紹鋪路，最終來到了我們主要目的點，
下面我們來點簡單的微信小程式開發：實作與后臺互動
- 微信小程式開發環境搭建：后續章節再詳細介紹
- 微信小程式前端開發：今天先體驗一下
- 微信小程式后端開發：后續章節詳細介紹
今天我們主要任務式體驗下，熟悉下相關的檔案
1、在主頁增加一個按鈕，這里直接上代碼
在index頁面模塊的index.wxml中添加主要代碼
<view>
<button bindtap='bindtest'>test</button>
</view>2、實作與后臺通訊，這里直接上代碼
在index頁面模塊的index.js中添加主要代碼
bindtest: function(){
var that = this
wx.request({
url: 'http://localhost:8080/wxTestDemo01Server/Demo01',
data:{
username:'smile',
password:'smile'
},
method:'GET',
header: {
'content-type': 'application/json' // 默認值
},
success:function(res){
console.log(res.data);
that.setData({
resultData:res.data
});
},
fail:function(res){
console.log(".....fail.....");
}
})
}3、接收后臺資料并展示，這里直接上代碼
在index頁面模塊的index.js中添加主要代碼
data: {
resultData: 'resultData'
}在index頁面模塊的index.wxml中添加主要代碼
<view >
<text >{{resultData}}</text>
</view>4、結果展示截圖
點擊test按鈕前微信小程式顯示界面：
點擊test按鈕后，微信小程式界面顯示：
點擊test按鈕后，后端日志顯示
點擊test按鈕后，微信小程式日志顯示：這里用到了真機除錯
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/283080.html
標籤：其他
上一篇：HDFS入門（四）—— HDFS的讀寫流程（圖文詳解步驟2021）
下一篇：LNMP-安裝mysql