close
上周被 小程序 刷瞭屏，嚇得我周末趕緊擼瞭個 小程序 版的 知乎日報 壓壓驚, 總結一下這個開發體驗，和踩過的坑。
開發環境準備
小程序 出來第二天就被破解，第三天微信就把開發工具開發下載瞭， 現在隻需要下載 微信開發者工具 就可以使用瞭，
創建項目的時候，要選擇無 appid, 這樣就不會有 appid 的驗證瞭。
目錄結構
app.js 註冊app邏輯， app.wxss 全局樣式文件 app.json 配置信息 pages 存放頁面文件 utils 工具類代碼 images 圖片資源文件 小程序中每一個頁面都會有三個文件 .wxml .wxss .js ，對應著結構、樣式、和邏輯，相當於網頁中的 html css 和 js 的關系。
開發第一個頁面
代碼來自新建除油煙機項目
!--index.wxml-- view 'HelloWorld',userInfo:{}},//事件處理函數bindViewTap:function(){wx.navigateTo({url:'../logs/logs'})},onLoad:function(){console.log('onLoad')varthat=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.jsfunctionformatTime(date){//....}functionformatDate(date,split){//...}module.exports={formatTime:formatTime,formatDate:formatDate} varutils=require('../../utils/util.js') 這裡的js 並不是在 瀏覽器環境下運行， 所以 window.* 這一類的代碼都會報錯， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js 庫運行，全封閉式，這個以後應該會逐漸完善。
頁面上使用 Page 方法來註冊一個頁面
Page({data:{//text: 這是一個頁面 },onLoad:func油煙靜電機tion(options){//頁面初始化options為頁面跳轉所帶來的參數},onReady:function(){//頁面渲染完成},onShow:function(){//頁面顯示},onHide:function(){//頁面隱藏},onUnload:function(){//頁面關閉}}) 當我們需要改變 綁定的數據時，必須調用 setData 方法修改，才會觸發頁面更新，像這樣：
Page({data:{text:'這是一個頁面'},onLoad:function(){this.setData({text:'thisispage'})}}) 條件渲染和列表渲染
以下內容來自微信官方文檔。
小程序使用 wx:if= {{condition}} 完成條件渲染，類似於 vue 的 v-if
viewwx:if= {{condition}} True /view 也可以用 wx:elif 和 wx:else 來添加一個 else 塊：
viewwx:if= {{l靜電排油煙機ength 5}} 1 /view viewwx:elif= {{length 2}} 2 /view viewwx:else 3 /view wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
內置變量 index (數組遍歷的下標)， item (數組遍歷的每一項)
viewwx:for= {{items}} {{index}}:{{item.message}} /view Page({items:[{message:'foo',},{message:'bar'}]}) 使用wx:for-item可以指定數組當前元素的變量名
使用wx:for-index可以指定數組當前下標的變量名：
viewwx:for= {{array}} wx:for-index= idx wx:for-item= itemName {{idx}}:{{itemName.message}} /view 事件綁定
wxml 隻是用 bind[eventName]= handler 語法綁定事件
viewbindtap= bindViewTap >通過 data-* 和 e.target.dateset 傳遞參數
viewbindtap= bindViewTap data-test-msg=
每日頭條、業界資訊、熱點資訊、八卦爆料，全天跟蹤微博播報。各種爆料、內幕、花邊、資訊一網打盡。百萬互聯網粉絲互動參與，TechWeb官方微博期待您的關註。
↑掃描二維碼
想在手機上看科技資訊和科技八卦嗎？
想第一時間看獨傢爆料和深度報道嗎？
請關註TechWeb官方微信公眾帳號：
1.用手機掃左側二維碼；
2.在添加朋友裡，搜索關註TechWeb。
AUGI SPORTS｜重機車靴｜重機車靴推薦｜重機專用車靴｜重機防摔鞋｜重機防摔鞋推薦｜重機防摔鞋
AUGI SPORTS｜augisports｜racing boots｜urban boots｜motorcycle boots
全站熱搜
留言列表
