微信小程序版的知乎日報開發(fā)實例

更新時間：2016年09月28日 14:41:02 投稿：daisy

相信大家最近都被小程序刷了屏，于是趁周末趕緊擼了個小程序版的知乎日報壓壓驚, 這篇文章主要是總結一下這個開發(fā)體驗，和踩過的坑。有需要的朋友們可以參考借鑒。

先看看效果圖

開發(fā)環(huán)境準備

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

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

目錄結構

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

2、pages 存放頁面文件

3、utils 工具類代碼

4、images 圖片資源文件

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

開發(fā)第一個頁面

代碼來自新建項目

<!--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

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

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

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

3、使用 bind* 綁定事件

wxss

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

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

@import "common.wxss";

.pd {
 padding-left: 5px;
}

頁面邏輯控制，遵循 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)境下運行，所以 window.* 這一類的代碼都會報錯， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js 庫運行，全封閉式，這個以后應該會逐漸完善。

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

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

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

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

條件渲染和列表渲染

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

小程序使用 wx:if="" 完成條件渲染，類似于 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
 }
})

在線圖片加載不穩(wěn)定

在知乎日報這個項目上有大量圖片需要從網上下載，這里 image 組件額顯示顯得極其不穩(wěn)定，有很多的圖片都顯示不出來.

總結

微信小程序現在還在內測階段，有很多的問題需要完善，不過對于開發(fā)速度和體驗來說還是不錯的，期待正式發(fā)布的那一天。以上就是本文的全部內容了，希望對大家學習使用微信小程序能有所幫助。

您可能感興趣的文章:

算法系列15天速成第六天五大經典查找【下】
大家是否感覺到，樹在數據結構中大行其道，什么領域都要沾一沾，碰一碰
2013-11-11
VScode中集成Git命令詳解
本文詳細講解了VScode中集成Git命令的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
Git入門【推薦】
本文主要介紹了Git入門的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
Postman返回中文亂碼的解決方案
使用postman發(fā)出請求，返回值含有中文字符串，卻發(fā)現中文被亂碼，本文就詳細的介紹一下Postman返回亂碼的解決方案，感興趣的可以了解一下
2022-01-01
git?push時卡住的解決方法(長時間不報錯也不自動退出)
這篇文章主要介紹了git?push時卡?。ㄩL時間不報錯也不自動退出）,解決方法是通過設置ssh，用ssh來克隆代碼然后再進行提交，本文給大家詳細解決方案，需要的朋友可以參考下
2023-01-01
關于Typora中l(wèi)atex的用法與常用語法
這篇文章主要介紹了關于Typora中l(wèi)atex的用法與常用語法,typora使用latex進行公式的編寫,本文說明了常用的語法,需要的朋友可以參考下
2023-04-04
HTTP請求首部字段及響應首部字段詳解
這篇文章主要介紹了HTTP請求首部字段及響應首部字段,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
計算機網絡日常練習題,每天進步一點點
下面小編就為大家?guī)硪黄嬎銠C網絡的幾道練習題(分享)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望可以幫到你
2021-09-09
詳解如何將本地項目上傳到Github的方法步驟(圖文)
這篇文章主要介紹了詳解如何將本地項目上傳到Github的方法步驟(圖文)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
使用git處理github中提交有沖突的pull request的問題
這篇文章主要介紹了使用git處理github中提交有沖突的pull request,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-11