前言：小程序越來越實用了，那麼本著實用和快速上手的目的；咱們就主要講一下，如何快速的搭建一個小型的留言板，並且和後端進行交互。
首先認識目錄結構
app.js 小程序邏輯
app.json 小程序公共配置
app.wxss 小程序公共樣式表
project.config.json 小程序項目配置
sitemap.json map索引文件
pages 頁面文件夾
index 首頁
index.wxml 向用戶展示的頁面
index.js 頁面主要邏輯
index.wxss 當前頁面樣式
index.json 當前頁面配置
utils 工具包文件夾
utils.js 工具包
詳解app.json
{
//主要核心，如果有新建了頁面，必須在這添加上
"pages":[
"pages/index/index",
"pages/logs/logs",
....
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
詳解app.js
globalData: {
userInfo: null
}
主要用於全局存儲使用，比如用戶信息，需要各種頁面都使用到的數據
開始第一步，查看官方文檔
訪問：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
利用官方提示的橫向和縱向布局成如下樣例
代碼，我們為了快讓大家了解如何搭建頁面，直接把index.wxml修改如下
<!--index.wxml-->
<view>
<view>
<view>
<view>
<text>留言板</text>
</view>
<view>
<view style="flex-direction:row;">
<view>
<view>
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
<block wx:else>
<image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text>{{userInfo.nickName}}</text>
</block>
</view>
</view>
</view>
</view>
</view>
</view>
<view>
<view>
<view style="flex-direction:column;">
<view>
<view>
<view>郵箱</view>
<view>
<view>
<input auto-focus value="{{email}}" bindinput="bindInput" data-name="email" placeholder="請輸入郵箱" />
</view>
</view>
</view>
</view>
<view>
<view>
<view>內容</view>
<view>
<view>
<textarea placeholder="請填寫您的意見" value="{{content}}" bindinput="bindInput" data-name="content" placeholder-style="color:red;" />
</view>
</view>
</view>
</view>
<view>
<view>
<view style="margin-top:10px">
<button type="primary" size="mini" bindtap="submit"> 提交 </button>
<button type="warn" size="mini" bindtap="rest"> 重置 </button>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
樣式，index.wxss，默認input都是無邊框等，我們加上邊框
/**index.wxss**/
.container{
padding: 10rpx;
display: block;
}
input {
border: 1px solid rgb(44, 36, 44);
}
textarea {
border: 1px solid rgb(44, 36, 44);
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
綁定數據，及動態設置數據
這個就必較核心了，我們做然後都是需要數據交互的，所以請耐心看如何設置
首先在index.js，找到data參數，並新加兩個email和content參數
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
//新增
email: "",
content: "",
},
index.wxml中的input使用: value="{{email}}"
<input auto-focus value="{{email}}" bindinput="bindInput" data-name="email" placeholder="請輸入郵箱" />
上面是讀取，接下來就是設置數據
//通過 bindinput="bindInput" 雙引號為自定義函數
bindInput:function(e){
var tempJson = {}
tempJson[e.currentTarget.dataset.name]=e.detail.value
this.setData(tempJson)
},
//以上代碼應寫在index.js中
以上圖片是我們針對獲取用戶輸入的時候對象下的數據結構介紹，通過圖片可以看到「e」都包含了那些內容。主要注意 e.detail.value，e.currentTarget.dataset
e.detail.value 是用戶輸入的值
e.currentTarget.dataset 是指我們在input標籤上設置的標記，通過data-xxxx="xxx" 來設置
我們為什麼這樣寫，主要是因為如果有10個input我們是不是要寫10個js綁定方法？
所以為了通用方案我們就通過標記動態設置數據，達到1個方法兼容所有用戶輸入。
重置
index.wxml
<button type="primary" size="mini" bindtap="submit"> 提交 </button>
<button type="warn" size="mini" bindtap="rest"> 重置 </button>
注意bindtap ，這個函數就是監控用戶點擊的事件
index.js 添加rest函數
rest: function () {
// that = this ，是因為js中使用了很多回調函數，導致this指向不是根，而是當前的對象
// 為了使用根的this對象，就需要通過臨時變量來解決掉作用域的問題
var that = this
wx.showModal({
title: "提示",
content: "是否清空",
success(res) {
if (res.confirm) {
that.setData({
email: "",
content: "",
})
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
},
點擊 重置 效果如下：
提交
上面已經有bindtap="submit"
我們主要看index.js submit方法
submit: function () {
var that = this
wx.showLoading({
title: '提交中...',
})
setTimeout(function () {
wx.hideLoading()
}, 2000)
wx.request({
url: 'https://xx.com/test.php', //僅為示例，並非真實的接口地址
data: {
email: that.data.email,
content: that.data.content
},
header: {
'content-type': 'application/json' // 默認值
},
success(res) {
console.log(res.data)
}
})
},
//以上就是一個我們日常和後端進行交互的一個請求，如果大家會jquery的ajax提交，這個一看就明白
提示：url 必須是https,也必須在對應的網頁端設置域名
如果填寫不正確點擊提交的時候就會提示：
總結
小程序發展到現在其實開發已經比較成熟了，所以大家可以開心的去做自己的小程序吧。入手起來按照以上內容可以快速的了解到渲染，綁定，與服務端交互，封裝方法等快捷開發。
微信小程序後續，「看簡識繁」小程序