微信小程序開發(fā)初體驗

jemygraw 發(fā)布于2019-08-20 11:16 / 671人閱讀

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

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

先上圖

開發(fā)環(huán)境準(zhǔ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ā)第一個頁面

代碼來自新建項目



  
    
    {{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)用實例
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)用實例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){
      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

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

wxml

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

用標(biāo)簽形式指定組件使用

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

使用 bind* 綁定事件

wxss

樣式文件，和 css 語法基本一致，不過支持的選擇器語法有限看這里，可以使用 flexbox 完成布局。
內(nèi)部也可以使用 import 命令引入外部樣式文件

@import "common.wxss";

.pd {
    padding-left: 5px;
}

頁面邏輯控制，遵循 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)境下運行，所以 window.* 這一類的代碼都會報錯， dom 操作也是不被允許的，官方目前好像是不能支持其他的 js 庫運行，全封閉式，這個以后應(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="{{condition}}" 完成條件渲染，類似于 vue 的 v-if

 True

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

 1 
 2 
 3

wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。
內(nèi)置變量 index （數(shù)組遍歷的下標(biāo)）， item （數(shù)組遍歷的每一項）


  {{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" 語法綁定事件

tap

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

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

tap

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

目前踩過的坑 事件綁定中 e.target.dataset

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

tap

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

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

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

最后

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

資源

官方文檔

開發(fā)工具下載

awesome-wechat-weapp

云服務(wù)器 GPU云服務(wù)器微信小程序開發(fā) 微信小程序開發(fā)語言微信小程序開發(fā)免費微信小程序開發(fā)步驟

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80480.html

發(fā)表評論

登陸后可評論

0條評論

jemygraw

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow網(wǎng)絡(luò)可視化

閱讀 1179·2023-04-26 02:38
TypeScript入門學(xué)習(xí)之路

閱讀 1473·2021-11-22 09:34
BigBoxHost：便宜美國服務(wù)器，雙Xeon L5420/16GB/2TB硬盤/1Gbps端口月

閱讀 1180·2021-09-26 10:19
純css，div隱藏滾動條，保留鼠標(biāo)滾動效果。[轉(zhuǎn)載]

閱讀 3159·2019-08-29 17:15
JQuery干貨篇之插入元素

閱讀 3515·2019-08-29 12:27
重學(xué)前端學(xué)習(xí)筆記（二十一）--如何選中svg里的a元素？

閱讀 1715·2019-08-26 13:51
JS核心知識點梳理——正則篇（下）

閱讀 1858·2019-08-26 13:47
前端開發(fā)學(xué)習(xí)筆記 - 1. Node.JS安裝筆記

閱讀 1010·2019-08-26 12:20

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

微信小程序開發(fā)初體驗

相關(guān)文章

**微信小程序開發(fā)時的常見問題**

**微信小程序開發(fā)時的常見問題**

**微信小程序開發(fā)時的常見問題**

**微信小程序開發(fā)系列二：微信小程序的視圖設(shè)計**

發(fā)表評論

0條評論

jemygraw

男|高級講師

TA的文章

tensorflow網(wǎng)絡(luò)可視化

TypeScript入門學(xué)習(xí)之路

BigBoxHost：便宜美國服務(wù)器，雙Xeon L5420/16GB/2TB硬盤/1Gbps端口月

純css，div隱藏滾動條，保留鼠標(biāo)滾動效果。[轉(zhuǎn)載]

JQuery干貨篇之插入元素

重學(xué)前端學(xué)習(xí)筆記（二十一）--如何選中svg里的a元素？

JS核心知識點梳理——正則篇（下）

前端開發(fā)學(xué)習(xí)筆記 - 1. Node.JS安裝筆記

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

微信小程序開發(fā)初體驗

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！