国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序開發初體驗

jemygraw / 684人閱讀

摘要：先上圖開發環境準備小程序出來第二天就被破解，第三天微信就把開發工具開發下載了，現在只需要下載微信開發者工具就可以使用了，創建項目的時候，要選擇無這樣就不會有的驗證了。

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

先上圖

開發環境準備

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

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

目錄結構

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

pages 存放頁面文件

utils 工具類代碼

images 圖片資源文件

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

開發第一個頁面

代碼來自新建項目



  
    
    {{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
//獲取應用實例
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

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

用標簽形式指定組件使用

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

使用 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("../../utils/util.js")

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

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

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

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

Page({
    data: {
        text: "這是一個頁面"
    },
    onLoad: function() {
        this.setData({
            text: "this is page"
        })
    }
})
條件渲染和列表渲染 
以下內容來自微信官方文檔。

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

 True

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

 1 
 2 
 3

wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。
內置變量 index （數組遍歷的下標）， item （數組遍歷的每一項）


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

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

使用wx:for-item可以指定數組當前元素的變量名

使用wx:for-index可以指定數組當前下標的變量名：


  {{idx}}: {{itemName.message}}
事件綁定

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

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

通過 data-* 和 e.target.dateset 傳遞參數

  tap
Page({
    bindViewTap: function(e) {
        // 會自動轉成駝峰式命名
        console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    }
})
目前踩過的坑 事件綁定中 e.target.dataset

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


    tap

Page({
    bindViewTap: function(e) {
        console.log(e.taget.dataset.testMsg) // undefined
    }
})
在線圖片加載不穩定

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

最后

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

資源

官方文檔

開發工具下載

awesome-wechat-weapp

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80480.html

相關文章

  • 微信小程序開發時的常見問題

    摘要：微信小程序開發常見問題一項目結構微信小程序項目結構主要有四個文件類型如下是框架設計的一套標簽語言，結合基礎組件事件系統，可以構建出頁面的結構。 微信小程序開發常見問題？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：項目結構 微信小程序項目結構主要有四個文件類型,如下 WXML （WeiXin Markup La...

    qpwoeiru96 評論0 收藏0

  • 微信小程序開發時的常見問題

    摘要：微信小程序開發常見問題一項目結構微信小程序項目結構主要有四個文件類型如下是框架設計的一套標簽語言，結合基礎組件事件系統，可以構建出頁面的結構。 微信小程序開發常見問題？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：項目結構 微信小程序項目結構主要有四個文件類型,如下 WXML （WeiXin Markup La...

    TNFE 評論0 收藏0

  • 微信小程序開發時的常見問題

    摘要：微信小程序開發常見問題一項目結構微信小程序項目結構主要有四個文件類型如下是框架設計的一套標簽語言，結合基礎組件事件系統，可以構建出頁面的結構。 微信小程序開發常見問題？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：項目結構 微信小程序項目結構主要有四個文件類型,如下 WXML （WeiXin Markup La...

    tianyu 評論0 收藏0

  • 微信小程序開發系列二：微信小程序的視圖設計

    摘要：安裝完畢后啟動微信開發者工具，會要求我們指定一個本地項目目錄和填寫微信小程序的。 我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。 showImg(https://segmentfault.com/img/remote/1460000016772885); 這是第一篇，從零開始學習微信小程序開發。主要是小程序的注冊和開發環境的搭建。 首先我們要在下列網址申請一個...

    Ryan_Li 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<