首頁  >  文章  >  微信小程式  >  微信小程式版的知乎日報開發實例

微信小程式版的知乎日報開發實例

高洛峰
高洛峰原創
2017-02-22 14:38:102421瀏覽

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

先來看看效果圖

微信小程式版的知乎日報開發實例

#開發環境準備

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

微信小程式版的知乎日報開發實例

#建立專案的時候,要選擇無appid, 這樣就不會有appid 的驗證了。

目錄結構

微信小程式版的知乎日報開發實例

#     1、app.js 註冊app邏輯,app.wxss 全域樣式文件app.json 設定資訊

     2、pages 存放頁面檔案

     3、utils 工具類別代碼

     4、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: &#39;Hello World&#39;,
 userInfo: {}
 },
 //事件处理函数
 bindViewTap: function() {
 wx.navigateTo({
  url: &#39;../logs/logs&#39;
 })
 },
 onLoad: function () {
 console.log(&#39;onLoad&#39;)
 var that = this
 //调用应用实例的方法获取全局数据
 app.getUserInfo(function(userInfo){
  //更新数据
  that.setData({
  userInfo:userInfo
  })
 })
 }
})

新建的專案中,index 下都會看到這些程式碼,接下來分別介紹wxml wxss js

wxml

#這個是頁面結構的描述檔, 主要用於以下內容

#     1.以標籤形式指定元件使用

     2、使用wx:for wx:if 等方式完成一些範本上的邏輯指令處理

     3、使用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(&#39;../../utils/util.js&#39;)

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

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

#
Page({
 data:{
 // text:"这是一个页面"
 },
 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

當我們需要改變綁定的資料時,必須呼叫setData 方法修改,才會觸發頁面更新,像這樣:

Page({
 data: {
  text: &#39;这是一个页面&#39;
 },
 onLoad: function() {
  this.setData({
   text: &#39;this is page&#39;
  })
 }
})

條件渲染與清單渲染

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

小程式使用wx:if="" 完成條件渲染,類似vue 的v-if

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

也可以用wx:elifwx: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: &#39;foo&#39;,
 },{
 message: &#39;bar&#39;
 }]
})



使用

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
 }
})

在线图片加载不稳定

在知乎日报这个项目上有大量图片需要从网上下载,这里 image 组件额显示显得极其不稳定,有很多的图片都显示不出来.

总结

微信小程序现在还在内测阶段,有很多的问题需要完善,不过对于开发速度和体验来说还是不错的,期待正式发布的那一天。以上就是本文的全部内容了,希望对大家学习使用微信小程序能有所帮助。


更多微信小程式版的知乎日報開發實例相关文章请关注PHP中文网!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn