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

原創

2018-09-02 07:13

寫在開始

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

微信羣二維碼歡迎交流

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

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

登錄 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上傳送門>>>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.