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

李增田發布于2019-08-22 18:14 / 1202人閱讀

摘要：微信群二維碼歡迎交流申請賬號點擊，進入小程序注冊頁面并根據指引填寫相關數據。下期預告將對微信小程序源文件結構及含義進行詳細講解，敬請期待。

寫在開始

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

微信群二維碼歡迎交流

申請賬號

點擊 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

 
  {{hello}}

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

GPU云服務器云服務器小程序開發公司前十名微信小程序開發微信小程序開發語言微信小程序開發免費

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

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

甲由科技指出小程序開發過程中需要注意的地方

摘要：在小程序開發和設計的任務和流程過程當中，會出現一些異常情況，這也是用戶最需要用到的時候，所以需要特別注意異常狀態，在出現問題的時候能給用戶明確的提示和一些解決方法。不少企業、商家都開發了屬于自己的小程序。需要提醒大家的是，在開發之前一定要做好充足的準備工作，從而保障開發工作能夠順利完成。那么，小程序開發前要做什么準備？showImg(https://segmentfault.com...

chadLi 2019-08-26 14:05 評論0 收藏0
前端資源系列（3）-微信小程序開發資源匯總

摘要：微信小程序應用號開發資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發框架轉在線工具小程序云端增強社區微信小程序微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者...

paney129 2019-08-20 11:14 評論0 收藏0