魔天记忘语小说,管理书籍排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

微信小程序開(kāi)發(fā)初體驗(yàn)

上周被小程序刷了屏，嚇得我周末趕緊擼了個(gè) 小程序版的知乎日?qǐng)?bào) 壓壓驚, 總結(jié)一下這個(gè)開(kāi)發(fā)體驗(yàn)，和踩過(guò)的坑。

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶(hù)提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、空間域名、虛擬主機(jī)、網(wǎng)絡(luò)營(yíng)銷(xiāo)、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶(hù)提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶(hù)的口碑塑造優(yōu)易品牌,攜手廣大客戶(hù),共同發(fā)展進(jìn)步。

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

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

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

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

app.js 注冊(cè)app邏輯， app.wxss 全局樣式文件 app.json 配置信息
pages 存放頁(yè)面文件
utils 工具類(lèi)代碼
images 圖片資源文件

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

開(kāi)發(fā)***個(gè)頁(yè)面

代碼來(lái)自新建項(xiàng)目

 
 
  
  
  
  
  
    
  
      
  
      {{userInfo.nickName}}
  
    
  
    
  
      {{motto}}

 
 
  
  /**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ì)看到這些代碼，接下來(lái)分別介紹 wxml wxss js

wxml

這個(gè)是頁(yè)面結(jié)構(gòu)的描述文件, 主要用于以下內(nèi)容

用標(biāo)簽形式指定組件使用
使用 wx:for wx:if 等指令完成一些模板上的邏輯處理
使用 bind* 綁定事件

wxss

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

內(nèi)部也可以使用 import 命令引入外部樣式文件

 
 
  
  @import "common.wxss";
  
  
  
  .pd {
  
      padding-left: 5px;
  
  }

頁(yè)面邏輯控制，遵循 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.* 這一類(lèi)的代碼都會(huì)報(bào)錯(cuò)， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js 庫(kù)運(yùn)行，全封閉式，這個(gè)以后應(yīng)該會(huì)逐漸完善。

頁(yè)面上使用 Page 方法來(lái)注冊(cè)一個(gè)頁(yè)面

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

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

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

條件渲染和列表渲染

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

小程序使用 wx:if="{{condition}}" 完成條件渲染，類(lèi)似于 vue 的 v-if

 
 
  
   True

也可以用 wx:elif 和 wx:else 來(lái)添加一個(gè) else 塊：

wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。

內(nèi)置變量 index (數(shù)組遍歷的下標(biāo))， item (數(shù)組遍歷的每一項(xiàng))

 
 
  
  
  
    {{index}}: {{item.message}}

 
 
  
  Page({
  
    items: [{
  
      message: 'foo',
  
    },{
  
      message: 'bar'
  
    }]
  
  })

使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名

使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

 
 
  
  
  
  
  
  {{idx}}: {{itemName.message}}

事件綁定

wxml 只是用 bind[eventName]="handler" 語(yǔ)法綁定事件

tap

 
 
  
  Page({
  
      bindViewTap: function(e) {
  
          console.log(e.taget)
  
      }
  
  })

通過(guò) data-* 和 e.target.dateset 傳遞參數(shù)

tap

 
 
  
  Page({
  
      bindViewTap: function(e) {
  
          // 會(huì)自動(dòng)轉(zhuǎn)成駝峰式命名
  
          console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
  
      }
  
  })

目前踩過(guò)的坑

事件綁定中 e.target.dataset

當(dāng)在父組件綁定事件和參數(shù)，點(diǎn)擊時(shí)又子組件冒泡事件到父組件，這個(gè)時(shí)候 e.target.dataset 為空

tap

 
 
  
  Page({
  
      bindViewTap: function(e) {
  
          console.log(e.taget.dataset.testMsg) // undefined
  
      }
  
  })

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

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

***

微信小程序現(xiàn)在還在內(nèi)測(cè)階段，有很多的問(wèn)題需要完善，不過(guò)對(duì)于開(kāi)發(fā)速度和體驗(yàn)來(lái)說(shuō)還是不錯(cuò)的，期待正式發(fā)布的那一天。

資源

官方文檔
開(kāi)發(fā)工具下載
awesome-wechat-weapp

文章標(biāo)題：微信小程序開(kāi)發(fā)初體驗(yàn)
網(wǎng)站網(wǎng)址：http://fisionsoft.com.cn/article/coeeodo.html

新聞中心

其他資訊