web微信小程序開發踩坑舉例分析

這篇文章主要介紹“web微信小程序開發踩坑舉例分析”，在日常操作中，相信很多人在web微信小程序開發踩坑舉例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web微信小程序開發踩坑舉例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

開發環境準備

小程序 出來第二天就被破解，第三天微信就把開發工具開發下載了， 現在只需要下載 微信開發者工具 就可以使用了，

創建項目的時候，要選擇無 appid, 這樣就不會有 appid 的驗證了。

目錄結構

• app.js 注冊app邏輯， app.wxss 全局樣式文件 app.json 配置信息

• pages 存放頁面文件

• utils 工具類代碼

• images 圖片資源文件

小程序中每一個頁面都會有三個文件 .wxml .wxss .js ，對應著結構、樣式、和邏輯，相當于網頁中的 html css 和 js 的關系。

開發***個頁面

代碼來自新建項目

<!--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 //獲取應用實例 var app = getApp() Page({   data: {     motto: 'Hello World',     userInfo: {}   },   //事件處理函數   bindViewTap: function() {     wx.navigateTo({       url: '../logs/logs'     })   },   onLoad: function () {     console.log('onLoad')     var that = this     //調用應用實例的方法獲取全局數據     app.getUserInfo(function(userInfo){       //更新數據       that.setData({         userInfo:userInfo       })     })   } })

新建的項目中，index 下都會看到這些代碼，接下來分別介紹 wxml wxss js

wxml

這個是頁面結構的描述文件, 主要用于以下內容

• 用標簽形式指定組件使用 <view></view>

• 使用 wx:for wx:if 等指令完成一些模板上的邏輯處理

• 使用 bind* 綁定事件

wxss

樣式文件，和 css 語法基本一致，不過支持的選擇器語法有限 看這里， 可以使用 flexbox 完成布局。

內部也可以使用 import 命令引入外部樣式文件

@import "common.wxss";  .pd {     padding-left: 5px; }

js

頁面邏輯控制， 遵循 commonJs 規范

// util.js function formatTime(date) {   // .... }  function formatDate(date, split) {   // ... } module.exports = {   formatTime: formatTime,   formatDate: formatDate }

var utils = require('../../utils/util.js')

這里的js 并不是在 瀏覽器環境下運行， 所以 window.* 這一類的代碼都會報錯， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js  庫運行，全封閉式，這個以后應該會逐漸完善。

頁面上使用 Page 方法來注冊一個頁面

Page({   data:{     // text:"這是一個頁面"   },   onLoad:function(options){     // 頁面初始化 options為頁面跳轉所帶來的參數   },   onReady:function(){     // 頁面渲染完成   },   onShow:function(){     // 頁面顯示   },   onHide:function(){     // 頁面隱藏   },   onUnload:function(){     // 頁面關閉   } })

當我們需要改變 綁定的數據時，必須調用 setData 方法修改，才會觸發頁面更新，像這樣：

Page({     data: {         text: '這是一個頁面'     },     onLoad: function() {         this.setData({             text: 'this is page'         })     } })

條件渲染和列表渲染

以下內容來自微信官方文檔。

小程序使用 wx:if="{{condition}}" 完成條件渲染，類似于 vue 的 v-if

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>

wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。

內置變量 index (數組遍歷的下標)， item (數組遍歷的每一項)

<view wx:for="{{items}}">   {{index}}: {{item.message}} </view>

Page({   items: [{     message: 'foo',   },{     message: 'bar'   }] })

使用wx:for-item可以指定數組當前元素的變量名

使用wx:for-index可以指定數組當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  {{idx}}: {{itemName.message}}  </view>

事件綁定

wxml 只是用 bind[eventName]="handler" 語法綁定事件

<view bindtap="bindViewTap" class="userinfo"><text>tap</text></view>

Page({     bindViewTap: function(e) {         console.log(e.taget)     } })

通過 data-* 和 e.target.dateset 傳遞參數

<view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>

Page({     bindViewTap: function(e) {         // 會自動轉成駝峰式命名         console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦     } })

目前踩過的坑

事件綁定中 e.target.dataset

當在父組件綁定事件和參數，點擊時又子組件冒泡事件到父組件，這個時候 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     } })

到此，關于“web微信小程序開發踩坑舉例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！