微信小程序開發: 開發前準備工做

寫在開始

本人資深後端碼農一枚，近期項目需求，接觸到了微信小程序，將學習過程整理成文分享給小夥伴們，因爲是邊學邊整理不免有表述不對的地方，望你們及時指正，感謝。

微信羣二維碼 歡迎交流

申請帳號

點擊 https://mp.weixin.qq.com/wxop...，進入小程序註冊頁面並根據指引填寫相關數據。

下載開發工具

開發者工具下載地址，根據本身的操做系統下載對應的版本

hello world

登陸 https://mp.weixin.qq.com，設置-開發設置中找到AppID:

運行已安裝的微信開發者工具，選擇小程序項目，填寫上一步的AppID及目錄等信息。

在項目目錄下分別建立如下文件:

/app.json

{
  "pages": [
    "pages/index/index"
  ]
}

/pages/index/index.js

Page({
  data: {
    hello: "這裏將顯示Hello文字"
  },
  handleDisplayHello() {
    this.setData({
      hello: "Hello WeChat MiniProgram"
    })
  }
})

/pages/index/index.wxml

<view class="container"> 
  <view class="content">{{hello}}</view> 
  <button bindtap="handleDisplayHello">顯示Hello</button>
</view>

/pages/index/index.wxss

.container {
  display:flex;
  flex-direction: column;
  align-items: center;
}
.container .content{
  margin: 50rpx;
  color: #0000cc;
}

點擊工具欄中的編譯按鈕，在模擬器中能夠預覽到效果，點擊小程序中顯示Hello按鈕後便可預覽Hello WeChat MiniProgram，如圖：

以上即是小程序開發的簡單準備工做及HelloWorld的Demo實現，下一篇文章將對每一個文件進行詳細講解。

下期預告

將對微信小程序源文件結構及含義進行詳細講解，敬請期待。

微信交流羣

微信羣二維碼會定時失效，爲了方便更新，將入羣二維碼放到了Github上 傳送門>>>