微信小程序開(kāi)發(fā)初體驗(yàn)
上周被 小程序 刷了屏，嚇得我周末趕緊擼了個(gè) 小程序 版的 知乎日?qǐng)?bào) 壓壓驚, 總結(jié)一下這個(gè)開(kāi)發(fā)體驗(yàn)，和踩過(guò)的坑。
開(kāi)發(fā)環(huán)境準(zhǔn)備
小程序 出來(lái)第二天就被破解，第三天微信就把開(kāi)發(fā)工具開(kāi)發(fā)下載了， 現(xiàn)在只需要下載 微信開(kāi)發(fā)者工具 就可以使用了，
創(chuàng)建項(xiàng)目的時(shí)候，要選擇無(wú) appid, 這樣就不會(huì)有 appid 的驗(yàn)證了。
目錄結(jié)構(gòu)
- app.js 注冊(cè)app邏輯， app.wxss 全局樣式文件 app.json 配置信息
- pages 存放頁(yè)面文件
- utils 工具類代碼
- images 圖片資源文件
小程序中每一個(gè)頁(yè)面都會(huì)有三個(gè)文件 .wxml .wxss .js ，對(duì)應(yīng)著結(jié)構(gòu)、樣式、和邏輯，相當(dāng)于網(wǎng)頁(yè)中的 html css 和 js 的關(guān)系。
開(kāi)發(fā)***個(gè)頁(yè)面
代碼來(lái)自新建項(xiàng)目
- <!--index.wxml-->
- <view class="container">
- <view bindtap="bindViewTap" class="userinfo">
- <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
- <text class="userinfo-nickname">{{userInfo.nickName}}</text>
- </view>
- <view class="usermotto">
- <text class="user-motto">{{motto}}</text>
- </view>
- </view>
- /**index.wxss**/
- .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
- //獲取應(yīng)用實(shí)例
- var app = getApp()
- Page({
- data: {
- motto: 'Hello World',
- userInfo: {}
- },
- //事件處理函數(shù)
- bindViewTap: function() {
- wx.navigateTo({
- url: '../logs/logs'
- })
- },
- onLoad: function () {
- console.log('onLoad')
- var that = this
- //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
- app.getUserInfo(function(userInfo){
- //更新數(shù)據(jù)
- that.setData({
- userInfo:userInfo
- })
- })
- }
- })
新建的項(xiàng)目中，index 下都會(huì)看到這些代碼，接下來(lái)分別介紹 wxml wxss js
wxml
這個(gè)是頁(yè)面結(jié)構(gòu)的描述文件, 主要用于以下內(nèi)容
- 用標(biāo)簽形式指定組件使用 <view></view>
- 使用 wx:for wx:if 等指令完成一些模板上的邏輯處理
- 使用 bind* 綁定事件
wxss
樣式文件，和 css 語(yǔ)法基本一致，不過(guò)支持的選擇器語(yǔ)法有限 看這里， 可以使用 flexbox 完成布局。
內(nèi)部也可以使用 import 命令引入外部樣式文件
- @import "common.wxss";
- .pd {
- padding-left: 5px;
- }
js
頁(yè)面邏輯控制， 遵循 commonJs 規(guī)范
- // util.js
- function formatTime(date) {
- // ....
- }
- function formatDate(date, split) {
- // ...
- }
- module.exports = {
- formatTime: formatTime,
- formatDate: formatDate
- }
- var utils = require('../../utils/util.js')
這里的js 并不是在 瀏覽器環(huán)境下運(yùn)行， 所以 window.* 這一類的代碼都會(huì)報(bào)錯(cuò)， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js 庫(kù)運(yùn)行，全封閉式，這個(gè)以后應(yīng)該會(huì)逐漸完善。
頁(yè)面上使用 Page 方法來(lái)注冊(cè)一個(gè)頁(yè)面
- Page({
- data:{
- // text:"這是一個(gè)頁(yè)面"
- },
- onLoad:function(options){
- // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
- },
- onReady:function(){
- // 頁(yè)面渲染完成
- },
- onShow:function(){
- // 頁(yè)面顯示
- },
- onHide:function(){
- // 頁(yè)面隱藏
- },
- onUnload:function(){
- // 頁(yè)面關(guān)閉
- }
- })
當(dāng)我們需要改變 綁定的數(shù)據(jù)時(shí)，必須調(diào)用 setData 方法修改，才會(huì)觸發(fā)頁(yè)面更新，像這樣：
- Page({
- data: {
- text: '這是一個(gè)頁(yè)面'
- },
- onLoad: function() {
- this.setData({
- text: 'this is page'
- })
- }
- })
條件渲染和列表渲染
以下內(nèi)容來(lái)自微信官方文檔。
小程序使用 wx:if="{{condition}}" 完成條件渲染，類似于 vue 的 v-if
- <view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊：
- <view wx:if="{{length > 5}}"> 1 </view>
- <view wx:elif="{{length > 2}}"> 2 </view>
- <view wx:else> 3 </view>
wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
內(nèi)置變量 index (數(shù)組遍歷的下標(biāo))， item (數(shù)組遍歷的每一項(xiàng))
- <view wx:for="{{items}}">
- {{index}}: {{item.message}}
- </view>
- Page({
- items: [{
- message: 'foo',
- },{
- message: 'bar'
- }]
- })
使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名
使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名：
- <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
- {{idx}}: {{itemName.message}}
- </view>
事件綁定
wxml 只是用 bind[eventName]="handler" 語(yǔ)法綁定事件
- <view bindtap="bindViewTap" class="userinfo"><text>tap</text></view>
- Page({
- bindViewTap: function(e) {
- console.log(e.taget)
- }
- })
通過(guò) data-* 和 e.target.dateset 傳遞參數(shù)
- <view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>
- Page({
- bindViewTap: function(e) {
- // 會(huì)自動(dòng)轉(zhuǎn)成駝峰式命名
- console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
- }
- })
目前踩過(guò)的坑
事件綁定中 e.target.dataset
當(dāng)在父組件綁定事件和參數(shù)，點(diǎn)擊時(shí)又子組件冒泡事件到父組件，這個(gè)時(shí)候 e.target.dataset 為空
- <view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo">
- <view><text>tap</text></view>
- </view>
- Page({
- bindViewTap: function(e) {
- console.log(e.taget.dataset.testMsg) // undefined
- }
- })
在線圖片加載不穩(wěn)定
在知乎日?qǐng)?bào)這個(gè)項(xiàng)目上有大量圖片需要從網(wǎng)上下載，這里 image 組件額顯示顯得極其不穩(wěn)定，有很多的圖片都顯示不出來(lái).
***
微信小程序現(xiàn)在還在內(nèi)測(cè)階段，有很多的問(wèn)題需要完善，不過(guò)對(duì)于開(kāi)發(fā)速度和體驗(yàn)來(lái)說(shuō)還是不錯(cuò)的，期待正式發(fā)布的那一天。
資源
