亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序版的知乎日報(bào)開發(fā)實(shí)例

 更新時間:2016年09月28日 14:41:02   投稿:daisy  
相信大家最近都被小程序刷了屏,于是趁周末趕緊擼了個小程序版的知乎日報(bào)壓壓驚, 這篇文章主要是總結(jié)一下這個開發(fā)體驗(yàn),和踩過的坑。有需要的朋友們可以參考借鑒。

先看看效果圖

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

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

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

目錄結(jié)構(gòu)

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

     2、pages 存放頁面文件

     3、utils 工具類代碼

     4、images 圖片資源文件

小程序中每一個頁面都會有三個文件 .wxml .wxss .js ,對應(yīng)著結(jié)構(gòu)、樣式、和邏輯,相當(dāng)于網(wǎng)頁中的 html css 和 js 的關(guān)系。

開發(fā)第一個頁面

代碼來自新建項(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 下都會看到這些代碼,接下來分別介紹 wxml wxss js

wxml

這個是頁面結(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.* 這一類的代碼都會報(bào)錯, dom 操作也是不被允許的,官方目前好像是不能支持其他的 js 庫運(yùn)行,全封閉式,這個以后應(yīng)該會逐漸完善。

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

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

當(dāng)我們需要改變 綁定的數(shù)據(jù)時,必須調(diào)用 setData 方法修改,才會觸發(fā)頁面更新,像這樣:

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

條件渲染和列表渲染

以下內(nèi)容來自微信官方文檔。

小程序使用 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 控制屬性綁定一個數(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) {
  // 會自動轉(zhuǎn)成駝峰式命名
  console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
 }
})

目前踩過的坑

事件綁定中 e.target.dataset

當(dāng)在父組件綁定事件和參數(shù),點(diǎn)擊時又子組件冒泡事件到父組件,這個時候 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)定

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

總結(jié)

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

相關(guān)文章

  • Git科普文,Git基本原理及各種騷操作(推薦)

    Git科普文,Git基本原理及各種騷操作(推薦)

    這篇文章主要介紹了Git科普文,Git基本原理及各種騷操作,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-08
  • windows下Idea使用git clone failed. Could not read from remote repository.

    windows下Idea使用git clone failed. Could not read from remote r

    這篇文章主要介紹了windows下Idea使用git clone failed. Could not read from remote repository.,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • 千萬要避免的五種程序注釋方式小結(jié)

    千萬要避免的五種程序注釋方式小結(jié)

    你是否有過復(fù)查程序時發(fā)現(xiàn)有些注釋毫無用處?程序注釋是為了提高代碼的可讀性,為了讓原作者以外的其他開發(fā)人員更容易理解這段程序。
    2011-10-10
  • php asp.net 比較 [推薦]

    php asp.net 比較 [推薦]

    如今當(dāng)提到 Web 開發(fā)時,您有許多選擇。這些方法中許多都涉及到預(yù)處理 - 即,利用特定的標(biāo)記將代碼嵌入到 HTML 頁面中
    2009-06-06
  • 提高編程技能的11個建議

    提高編程技能的11個建議

    當(dāng)你不熟悉編程的時候,你可能會覺得無從下手,并且不知道如何運(yùn)用學(xué)到的知識。只要你通過了這一困難的學(xué)習(xí)階段,你就會發(fā)現(xiàn)一個全新的世界
    2014-08-08
  • 算法系列15天速成——第十三天 樹操作【下】

    算法系列15天速成——第十三天 樹操作【下】

    今天說下最后一種樹,大家可否知道,文件壓縮程序里面的核心結(jié)構(gòu),核心算法是什么?或許你知道,他就運(yùn)用了赫夫曼樹
    2013-11-11
  • 教你JVM怎么使用native memory

    教你JVM怎么使用native memory

    這篇文章主要為大家介紹了JVM怎么使用native memory原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • 解決Fiddler在win7系統(tǒng)下的安全證書問題

    解決Fiddler在win7系統(tǒng)下的安全證書問題

    今天小編就為大家分享一篇關(guān)于解決Fiddler在win7系統(tǒng)下的安全證書問題,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2018-10-10
  • 即時通訊軟件在網(wǎng)頁上啟動臨時對話的鏈接代碼

    即時通訊軟件在網(wǎng)頁上啟動臨時對話的鏈接代碼

    旺旺臨時對話的鏈接,MSN臨時對話的鏈接,Skype臨時對話的鏈接
    2008-11-11
  • 關(guān)于IE11修改User-agent不再支持document.all等

    關(guān)于IE11修改User-agent不再支持document.all等

    這篇文章主要介紹了關(guān)于IE11修改User-agent不再支持document.all等,需要的朋友可以參考下
    2015-12-12

最新評論