在官網下載微信小程序開發工具，有前端基礎就能做，語法類似VUE

微信小程序簡單來說就是前端頁面，接受后端數據再展現出來即可，所以樣式操作占小程序開發的半壁江山

小程序單頁面目錄：

CSS--->WXSS

HTML-->WXML

.js是頁面加載的一些方法文件

.json中可以設置頁面標題，主題色等

因為WXSS的編輯不方便，所以將他重命名為less文件，在VisualStudio Code中安裝less轉wxss插件

JS空文件：

Page({ /** * 頁面的初始數據 */??data:?{??}, /** * 生命周期函數--監聽頁面加載 */??onLoad:?function?(options)?{??}, /** * 生命周期函數--監聽頁面初次渲染完成 */??onReady:?function?()?{??}, /** * 生命周期函數--監聽頁面顯示 */??onShow:?function?()?{??}, /** * 生命周期函數--監聽頁面隱藏 */??onHide:?function?()?{??}, /** * 生命周期函數--監聽頁面卸載 */??onUnload:?function?()?{??}, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */??onPullDownRefresh:?function?()?{??}, /** * 頁面上拉觸底事件的處理函數 */??onReachBottom:?function?()?{??}, /** * 用戶點擊右上角分享 */??onShareAppMessage:?function?()?{ }})

data存放本頁面將使用的數據，一般請求到響應后存入data，存儲方法

data:?{??all:[],}, DOSOME(){ // 數據名同名 this.setData({ all, })??//?數據名不同名 this.setData({ all:alls, })},??

請求舉例：

wx.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', success: (result) => { console.log(result); this.setData({ swiperList: result.data.message }) wx.hideLoading(); }});

加載彈窗:

wx.showLoading({ title: "加載中", mask: true});

緩存舉例：

var Hcaches=wx.getStorageSync("Hcaches");// 如果沒有緩存if(!Hcaches){ this.getCateData();// 如果有緩存}else{ // 如果緩存過期(默認5min) if(Date.now()-Hcaches.time>1000*60*5){ // 重新發出請求 this.getCateData(); }else{ this.catchs=Hcaches.data; // 左邊 var leftdata=this.catchs.map(v=>v.cat_name); // 右邊 var rightdata=this.catchs[0].children; this.setData({ leftdata, rightdata }) }},getCateData(){ wx-wx.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories', success: (result) => { this.catchs=result.data.message; // 添加緩存 // 緩存初始時間戳 wx.setStorageSync("Hcaches",{data:this.catchs,time:Date.now()}); // 左邊 var leftdata=this.catchs.map(v=>v.cat_name); // 右邊 var rightdata=this.catchs[0].children; this.setData({ leftdata, rightdata }) } })},

LESS樣式舉例(CSS相似度98%)：

.btm_tools{ display: flex; position: fixed; bottom: 0; left: 0; padding: 0; height: 110rpx; width: 100%; background-color: white; .chechbox{ flex: 2; display: flex; checkbox-group{ flex: 1; height: 100%; width: 80%; checkbox{ height: 100%; flex: auto; display: flex; justify-content: center; align-items: center; } } .checkbox_text{ flex: 1; display: flex; justify-content: left; align-items: center; } } .price_tools{ flex: 4; display: flex; // flex-direction: column; .heji{ display: flex; position: absolute; bottom: 50rpx; left: 280rpx; } .price_all{ display: flex; position: absolute; bottom: 50rpx; right: 230rpx; font-size: 45rpx; color: orangered; } .yunfei{ display: flex; position: absolute; bottom: 10rpx; right: 230rpx; font-size: 30rpx; } } .price_submit{ flex: 2.3; display: flex; color: white; font-size: 40rpx; background-color: orange; text-align: center; .contents{ width: 100%; display: flex; justify-content: center; align-items: center; padding: 10rpx; } }}

以上為我以前做的傻逼電商項目部分代碼,下面是小程序視頻演示

總結

以上是生活随笔為你收集整理的微信小程序 全局变量异步函数_微信小程序制作简述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。