為何現(xiàn)在的微信小程序還是高溫不退？主要原因如下：無(wú)需安裝、不占內(nèi)存、易傳播。

廢話不多說(shuō)，開(kāi)始進(jìn)入開(kāi)發(fā)！

-----------小程序環(huán)境搭建-----------------------------------

賬號(hào)注冊(cè)

百度搜索 "微信公眾平臺(tái)"官網(wǎng)地址： https://mp.weixin.qq.com/微信公眾平臺(tái)小程序注冊(cè)地址：

微信公眾平臺(tái)?mp.weixin.qq.com

創(chuàng)建小程序

1.下載開(kāi)發(fā)工具開(kāi)發(fā)工具下載地址：

穩(wěn)定版 Stable Build | 微信開(kāi)放文檔?developers.weixin.qq.com

2.獲取appid小程序的appid相當(dāng)于小程序平臺(tái)的一個(gè)身份證。

微信官方開(kāi)發(fā)工具開(kāi)發(fā)（或使用其他開(kāi)發(fā)工具開(kāi)發(fā)）

1.注意基礎(chǔ)庫(kù)的版本

2.大致熟悉開(kāi)發(fā)工具

-------------原生開(kāi)發(fā)----------------------------------

在最開(kāi)始之前，筆者要說(shuō)的是如果你有學(xué)習(xí)過(guò)類似mvvm思想的框架，比如vue,

那你就比較容易理解和開(kāi)發(fā)小程序了。

小程序文件結(jié)構(gòu)

1.基本的結(jié)構(gòu)

- pages // 包含了所有頁(yè)面 - index // 頁(yè)面文件夾- index.js // 頁(yè)面的腳本邏輯文件- index.wxml // 頁(yè)面模板文件- index.wxss // 頁(yè)面樣式文件- index.json // 頁(yè)面配置文件 -cart //購(gòu)物車頁(yè)面- cart.js // 頁(yè)面的腳本邏輯文件- cart.wxml // 頁(yè)面模板文件- cart.wxss // 頁(yè)面樣式文件- cart.json // 頁(yè)面配置文件 -components//公共組件文件夾 - utils // 普通的工具函數(shù) - app.js // 項(xiàng)目啟動(dòng)入口 - app.json // 全局的配置 - app.wxss // 全局樣式 - project.config.json // 項(xiàng)目的配置文件

和web的頁(yè)面結(jié)構(gòu)比較：

.wxml .html
.wxss .css
.js .js
app.xxx 指的是整個(gè)小程序的樣式/配置，有全局控制的感覺(jué)
當(dāng)前頁(yè)面中的.json .wxss .js 一般都只對(duì)當(dāng)前頁(yè)面有效，全局無(wú)效

2.官方文檔學(xué)習(xí)開(kāi)發(fā)規(guī)則

小程序簡(jiǎn)介 | 微信開(kāi)放文檔?developers.weixin.qq.com

----------------框架開(kāi)發(fā)---------------------------------------------

mpvue

一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架,即把vuejs文件編譯成微信小程序文件，當(dāng)然是會(huì)存在一定的平臺(tái)性差異。

官網(wǎng)：

mpvue-docs?mpvue.com

源碼：

Meituan-Dianping/mpvue?github.com

mpvue5分鐘上手教程

1.安裝:

npm install --global vue-cli@2.9

vue init mpvue/mpvue-quickstart store

注意：appid需要輸入個(gè)人的appid,Vuex（y/n）和eslint（y/n）都輸入 n

2.切換到項(xiàng)目目錄cd store store 是項(xiàng)目目錄

3.安裝依賴npm install

4.啟動(dòng)服務(wù)npm run dev注意：運(yùn)行成功后，可以看到本地多了個(gè) dist 目錄，這個(gè)目錄里就是生成的小程序相關(guān)代碼。

5.使用微信開(kāi)發(fā)工具運(yùn)行小程序，新建小程序需要的信息：

• 項(xiàng)目目錄：就是剛剛創(chuàng)建的項(xiàng)目目錄（非 dist 目錄）
• AppID，個(gè)人的appid
• 項(xiàng)目名稱

mpvue基本結(jié)構(gòu)介紹

build - 把mpvue構(gòu)建成小程序的配置文件(忽略) config - 基礎(chǔ)的配置文件(忽略) dist - 構(gòu)建后的小程序項(xiàng)目(忽略) src - 項(xiàng)目開(kāi)發(fā)文件components - 項(xiàng)目公共組件pages - 小程序頁(yè)面utils - 工具文件夾 (忽略)app.json - 小程序項(xiàng)目配置文件App.vue - 項(xiàng)目VUE入口文件main.js - 項(xiàng)目入口文件 static - 靜態(tài)資源文件 -.... project.config.json - 同原生小程序的配置文件

好了，現(xiàn)在你可以開(kāi)始寫你的項(xiàng)目了！！！

初學(xué)者可以關(guān)注一些學(xué)習(xí)的公眾號(hào)，比如前端學(xué)習(xí)指南等進(jìn)行了解學(xué)習(xí)前端這個(gè)領(lǐng)域的資訊和發(fā)展。

總結(jié)

以上是生活随笔為你收集整理的mpvue微信小程序动画_入门微信小程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。