天天看點

微信小程式從零到一快速開發

最近幾天開發了一個關于記錄書籍的小程式,業餘時間從零基礎邊學邊做總共用了5天時間,接下來我将示範如何快速開發一個小程式。

微信小程式從零到一快速開發

掃碼看效果

一.首先需要先去微信公衆平台 注冊一個小程式賬号

二.下載下傳 微信開發者工具

三.開始愉快的開發吧

1.先來了解一下小程式的目錄結構

微信小程式從零到一快速開發

目錄結構

images:存放圖檔(需要自己建立)
libs:存放第三方庫
pages:存放頁面
utils:存放工具檔案(目前沒用到)
再說一下各種字尾名檔案對應的作用
.js(負責頁面邏輯),.wxml(負責頁面排版相當于網頁的html檔案),.wxss(負責頁面的樣式相當于網頁的css檔案),.json(配置檔案)

2.接下來主要說一下app.json檔案,小程式的标題樣式、底部tabBar、頁面的注冊都在這裡進行操作,是以app.json是非常重要的一個檔案

微信小程式從零到一快速開發

app.json

微信小程式從零到一快速開發
值得注意的是想要建立一個頁面隻需要在該檔案裡進行配置然後儲存即可自動生成
微信小程式從零到一快速開發
微信小程式從零到一快速開發
現在簡單的架構就出來了
微信小程式從零到一快速開發

image

然後就可以愉快的開發了
比如在test頁面加入我是小程式文字
test.wxml
<!--pages/test/test.wxml-->
<text class='xcx'>我是小程式</text>
           
test.wxss
/* pages/test/test.wxss */
.xcx{
  font-size: 60rpx;
  color: red;
  display: block;
  text-align: center;
}
           
微信小程式從零到一快速開發

個人部落格 https://myml666.github.io

繼續閱讀