微信小程序版的知乎日?qǐng)?bào)開發(fā)實(shí)例
先看看效果圖
開發(fā)環(huán)境準(zhǔn)備
小程序 出來第二天就被破解,第三天微信就把開發(fā)工具開發(fā)下載了, 現(xiàn)在只需要下載 微信開發(fā)者工具 就可以使用了,
創(chuàng)建項(xiàng)目的時(shí)候,要選擇無 appid, 這樣就不會(huì)有 appid 的驗(yàn)證了。
目錄結(jié)構(gòu)
1、app.js 注冊(cè)app邏輯, app.wxss 全局樣式文件 app.json 配置信息
2、pages 存放頁面文件
3、utils 工具類代碼
4、images 圖片資源文件
小程序中每一個(gè)頁面都會(huì)有三個(gè)文件 .wxml .wxss .js ,對(duì)應(yīng)著結(jié)構(gòu)、樣式、和邏輯,相當(dāng)于網(wǎng)頁中的 html css 和 js 的關(guān)系。
開發(fā)第一個(gè)頁面
代碼來自新建項(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ì)看到這些代碼,接下來分別介紹 wxml wxss js
wxml
這個(gè)是頁面結(jié)構(gòu)的描述文件, 主要用于以下內(nèi)容
1、用標(biāo)簽形式指定組件使用 <view></view>
2、使用 wx:for wx:if 等指令完成一些模板上的邏輯處理
3、使用 bind* 綁定事件
wxss
樣式文件,和 css 語法基本一致,不過支持的選擇器語法有限 看這里 , 可以使用 flexbox 完成布局。
內(nèi)部也可以使用 import 命令引入外部樣式文件
@import "common.wxss"; .pd { padding-left: 5px; }
js
頁面邏輯控制, 遵循 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 庫運(yùn)行,全封閉式,這個(gè)以后應(yīng)該會(huì)逐漸完善。
頁面上使用 Page 方法來注冊(cè)一個(gè)頁面
Page({ data:{ // text:"這是一個(gè)頁面" }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關(guān)閉 } })
當(dāng)我們需要改變 綁定的數(shù)據(jù)時(shí),必須調(diào)用 setData 方法修改,才會(huì)觸發(fā)頁面更新,像這樣:
Page({ data: { text: '這是一個(gè)頁面' }, onLoad: function() { this.setData({ text: 'this is page' }) } })
條件渲染和列表渲染
以下內(nèi)容來自微信官方文檔。
小程序使用 wx:if=""
完成條件渲染,類似于 vue 的 v-if
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif
和 wx:else
來添加一個(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"
語法綁定事件
<view bindtap="bindViewTap" class="userinfo"><text>tap</text></view> Page({ bindViewTap: function(e) { console.log(e.taget) } })
通過 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) // 啦啦啦啦啦啦 } })
目前踩過的坑
事件綁定中 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)定,有很多的圖片都顯示不出來.
總結(jié)
微信小程序現(xiàn)在還在內(nèi)測(cè)階段,有很多的問題需要完善,不過對(duì)于開發(fā)速度和體驗(yàn)來說還是不錯(cuò)的,期待正式發(fā)布的那一天。以上就是本文的全部?jī)?nèi)容了,希望對(duì)大家學(xué)習(xí)使用微信小程序能有所幫助。
- 微信小程序開發(fā)之實(shí)現(xiàn)選項(xiàng)卡(窗口頂部TabBar)頁面切換
- 詳解微信小程序開發(fā)之下拉刷新 上拉加載
- 微信小程序(應(yīng)用號(hào))開發(fā)新聞客戶端實(shí)例
- 微信小程序開發(fā)一鍵登錄 獲取session_key和openid實(shí)例
- 微信小程序 開發(fā)指南詳解
- 微信小程序 簡(jiǎn)單實(shí)例(閱讀器)的實(shí)例開發(fā)
- 詳解微信小程序開發(fā)—你期待的分享功能來了,微信小程序序新增5大功能
- 微信小程序 開發(fā)工具快捷鍵整理
- 微信小程序開發(fā)(二)圖片上傳+服務(wù)端接收詳解
- 微信小程序開發(fā)的四十個(gè)技術(shù)竅門總結(jié)(推薦)
相關(guān)文章
windows下Idea使用git clone failed. Could not read from remote r
這篇文章主要介紹了windows下Idea使用git clone failed. Could not read from remote repository.,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09解決Fiddler在win7系統(tǒng)下的安全證書問題
今天小編就為大家分享一篇關(guān)于解決Fiddler在win7系統(tǒng)下的安全證書問題,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-10-10即時(shí)通訊軟件在網(wǎng)頁上啟動(dòng)臨時(shí)對(duì)話的鏈接代碼
旺旺臨時(shí)對(duì)話的鏈接,MSN臨時(shí)對(duì)話的鏈接,Skype臨時(shí)對(duì)話的鏈接2008-11-11關(guān)于IE11修改User-agent不再支持document.all等
這篇文章主要介紹了關(guān)于IE11修改User-agent不再支持document.all等,需要的朋友可以參考下2015-12-12