日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
微信小程序開發(fā)初體驗

 上周被 小程序 刷了屏，嚇得我周末趕緊擼了個 小程序 版的 知乎日報 壓壓驚, 總結(jié)一下這個開發(fā)體驗，和踩過的坑。

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

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

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

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

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

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

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

開發(fā)***個頁面

代碼來自新建項目

 
 
    
  
  
    2. 
  
  
    3. 
  
  
  3.   
    4. 
  
  
  4.     
    5. 
  
  
  5.     {{userInfo.nickName}}
    6. 
  
  
  6.   
    7. 
  
  
  7.   
    8. 
  
  
  8.     {{motto}}
    9. 
  
  
  9.   
    10. 
  
  
  10.  
    11. 
 
 
 
 
    
  
  
  1. /**index.wxss**/
    2. 
  
  
  2. .userinfo {
    3. 
  
  
  3.   display: flex;
    4. 
  
  
  4.   flex-direction: column;
    5. 
  
  
  5.   align-items: center;
    6. 
  
  
  6. }
    7. 
  
  
  7. 
  
  
  8. .userinfo-avatar {
    9. 
  
  
  9.   width: 128rpx;
    10. 
  
  
  10.   height: 128rpx;
    11. 
  
  
  11.   margin: 20rpx;
    12. 
  
  
  12.   border-radius: 50%;
    13. 
  
  
  13. }
    14. 
  
  
  14. 
  
  
  15. .userinfo-nickname {
    16. 
  
  
  16.   color: #aaa;
    17. 
  
  
  17. }
    18. 
  
  
  18. 
  
  
  19. .usermotto {
    20. 
  
  
  20.   margin-top: 200px;
    21. 
  
  
  21. } 
    22. 
 
 
 
 
    
  
  
  1. //index.js
    2. 
  
  
  2. //獲取應(yīng)用實例
    3. 
  
  
  3. var app = getApp()
    4. 
  
  
  4. Page({
    5. 
  
  
  5.   data: {
    6. 
  
  
  6.     motto: 'Hello World',
    7. 
  
  
  7.     userInfo: {}
    8. 
  
  
  8.   },
    9. 
  
  
  9.   //事件處理函數(shù)
    10. 
  
  
  10.   bindViewTap: function() {
    11. 
  
  
  11.     wx.navigateTo({
    12. 
  
  
  12.       url: '../logs/logs'
    13. 
  
  
  13.     })
    14. 
  
  
  14.   },
    15. 
  
  
  15.   onLoad: function () {
    16. 
  
  
  16.     console.log('onLoad')
    17. 
  
  
  17.     var that = this
    18. 
  
  
  18.     //調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)
    19. 
  
  
  19.     app.getUserInfo(function(userInfo){
    20. 
  
  
  20.       //更新數(shù)據(jù)
    21. 
  
  
  21.       that.setData({
    22. 
  
  
  22.         userInfo:userInfo
    23. 
  
  
  23.       })
    24. 
  
  
  24.     })
    25. 
  
  
  25.   }
    26. 
  
  
  26. }) 
    27.

新建的項目中，index 下都會看到這些代碼，接下來分別介紹 wxml wxss js

wxml

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

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

wxss

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

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

 
 
    
  
  
  1. @import "common.wxss";
    2. 
  
  
  2. 
  
  
  3. .pd {
    4. 
  
  
  4.     padding-left: 5px;
    5. 
  
  
  5. } 
    6.

js

頁面邏輯控制， 遵循 commonJs 規(guī)范

 
 
    
  
  
  1. // util.js
    2. 
  
  
  2. function formatTime(date) {
    3. 
  
  
  3.   // ....
    4. 
  
  
  4. }
    5. 
  
  
  5. 
  
  
  6. function formatDate(date, split) {
    7. 
  
  
  7.   // ...
    8. 
  
  
  8. }
    9. 
  
  
  9. module.exports = {
    10. 
  
  
  10.   formatTime: formatTime,
    11. 
  
  
  11.   formatDate: formatDate
    12. 
  
  
  12. } 
    13. 
 
 
 
 
    
  
  
  1. var utils = require('../../utils/util.js')
    2.

這里的js 并不是在 瀏覽器環(huán)境下運行， 所以 window.* 這一類的代碼都會報錯， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js 庫運行，全封閉式，這個以后應(yīng)該會逐漸完善。

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

 
 
    
  
  
  1. Page({
    2. 
  
  
  2.   data:{
    3. 
  
  
  3.     // text:"這是一個頁面"
    4. 
  
  
  4.   },
    5. 
  
  
  5.   onLoad:function(options){
    6. 
  
  
  6.     // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
    7. 
  
  
  7.   },
    8. 
  
  
  8.   onReady:function(){
    9. 
  
  
  9.     // 頁面渲染完成
    10. 
  
  
  10.   },
    11. 
  
  
  11.   onShow:function(){
    12. 
  
  
  12.     // 頁面顯示
    13. 
  
  
  13.   },
    14. 
  
  
  14.   onHide:function(){
    15. 
  
  
  15.     // 頁面隱藏
    16. 
  
  
  16.   },
    17. 
  
  
  17.   onUnload:function(){
    18. 
  
  
  18.     // 頁面關(guān)閉
    19. 
  
  
  19.   }
    20. 
  
  
  20. }) 
    21.

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

 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     data: {
    3. 
  
  
  3.         text: '這是一個頁面'
    4. 
  
  
  4.     },
    5. 
  
  
  5.     onLoad: function() {
    6. 
  
  
  6.         this.setData({
    7. 
  
  
  7.             text: 'this is page'
    8. 
  
  
  8.         })
    9. 
  
  
  9.     }
    10. 
  
  
  10. }) 
    11.

條件渲染和列表渲染

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

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

 
 
    
  
  
  1.  True 
    2.

也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

 
 
    
  
  
  1.  5}}"> 1 
    2. 
  
  
  2.  2}}"> 2 
    3. 
  
  
  3.  3  
    4.

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

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

 
 
    
  
  
    2. 
  
  
  2.   {{index}}: {{item.message}}
    3. 
  
  
  3.  
    4. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.   items: [{
    3. 
  
  
  3.     message: 'foo',
    4. 
  
  
  4.   },{
    5. 
  
  
  5.     message: 'bar'
    6. 
  
  
  6.   }]
    7. 
  
  
  7. }) 
    8.

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

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

 
 
    
  
  
    2. 
  
  
  2. 
  
  
  3. {{idx}}: {{itemName.message}}
    4. 
  
  
  4. 
  
  
  5.  
    6.

事件綁定

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

 
 
    
  
  
  1. tap 
    2. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     bindViewTap: function(e) {
    3. 
  
  
  3.         console.log(e.taget)
    4. 
  
  
  4.     }
    5. 
  
  
  5. }) 
    6.

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

 
 
    
  
  
  1. tap 
    2. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     bindViewTap: function(e) {
    3. 
  
  
  3.         // 會自動轉(zhuǎn)成駝峰式命名
    4. 
  
  
  4.         console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    5. 
  
  
  5.     }
    6. 
  
  
  6. }) 
    7.

目前踩過的坑

事件綁定中 e.target.dataset

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

 
 
    
  
  
    2. 
  
  
  2. 
  
  
  3. tap
    4. 
  
  
  4. 
  
  
  5.  
    6. 
 
 
 
 
    
  
  
  1. Page({
    2. 
  
  
  2.     bindViewTap: function(e) {
    3. 
  
  
  3.         console.log(e.taget.dataset.testMsg) // undefined
    4. 
  
  
  4.     }
    5. 
  
  
  5. }) 
    6.

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

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

***

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

資源

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

分享文章：微信小程序開發(fā)初體驗
網(wǎng)站地址：http://m.5511xx.com/article/coeeodo.html