微信小程序开发（图文教程）

微信小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

微信开发者工具下载

在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html >> 选择 Windows 64

微信开发者工具安装

双击软件 >> 安装 >> 下一步 >> 成功完成

更新最新版本方法

微信开发者工具配置

app.js里 "entryPagePath":"pages/logs/logs", 为设置默认APP显示页

app.json(透明顶部标题) >>

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "防伪码查询测试版",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom" 
},

app.json(改顶部标题背景) >>

"window": {    
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "防伪码查询测试版",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
},

app.json(添加底部菜单) >>

"tabBar": {
      "color": "#4C4D4E",
      "selectedColor": "#BDA066",
      "list": [
        {
          "text": "首页",
          "pagePath": "pages/index/index",
          "iconPath": "images/home.png",
          "selectedIconPath": "images/home-fill.png"
        },
        {
            "text": "分类",
            "pagePath": "pages/classify/classify",
            "iconPath": "images/all.png",
            "selectedIconPath": "images/all-fill.png"
        },
        {
          "text": "资讯",
          "pagePath": "pages/news/news",
          "iconPath": "images/news.png",
          "selectedIconPath": "images/news-fill.png"
        }
      ]
  },

app.wxss(定义全局样式) >>

.fanhuiback{
  position: fixed;
  top:62rpx;
  left:15rpx; 
}

app.js(定义全局变量) >>

globalData: {//定义全局变量     const app = getApp();//获取app变量  app.globalData.httpurl  使用
    userInfo: null,
    httpurl:"https://xiyueta.com/test/web20220813a/"
},

home/home.wxss(定义page的背景颜色) >>

page {
  background-color: #FBE399;
}

home/pageDetail.wxml(界面里添加rich-text) >>

<rich-text nodes="{{cxid}}" class="ma"></rich-text>
  cxid=<font style='color:red'></font>

home/home.js(加载时用GET方式调用外部程序) >>

onLoad(options) { 
    // const token=wx.getStorageSync("token");
    // console.log("token",token);
    // console.log("test",app.globalData.httpurl)
    this.loadJson();
  },

  loadJson(){ 
    wx.request({
      url:app.globalData.httpurl+'api/home.asp',
      method:'GET',
      success:(res)=>{
        console.log("home",res)
        // console.log(res.data.foottext)
        this.setData({  
          bg:res.data.bg  
        })
      }
    })
  },

home/home.js(调用扫码) >>

clickimg1(e) {
    var that = this;
    console.log("home","点击");

    wx.scanCode({
      onlyFromCamera: true,// 只允许从相机扫码
      success(res){
        console.log("扫码成功："+JSON.stringify(res))
        let url=res.result;
        let nLen=url.indexOf('?cxid=');
        if(nLen!=-1){
          url=url.substr(nLen+6);
        }
        console.log("show",url)
 
        // 扫码成功后  在此处理接下来的逻辑
        that.setData({
          scanCode: res.result
        })
        //跳转
        wx.navigateTo({
          url: "./pageLanguage?cxid="+url
        })

      }
    })

  },

  界面调用 <image src="{{bg}}" mode="widthFix" class="saomiao"></image>

跳转和接受参数 >>

//跳转
  wx.navigateTo({
    url: "./pageLanguage?cxid="+url
  })

//接受
  onLoad(options) {
    this.setData({
      cxid: options.cxid
    })
      
    this.loadJson();
  },

page/pageInfo.wxml(隐藏图片) >>

<image src="{{img1}}" mode="widthFix" class="imgtop" hidden="{{click1On}}" bindtap='clickAct1'></image>
  <image src="{{img2}}" mode="widthFix" class="imgtop"  hidden="{{click1Off}}" bindtap='clickAct1'></image>

page/pageDetail.wxml(if判断) >>

<view class="t2" wx:if="{{lan!='en'}}">{{t10}}</view> 
    <view class="t2en" wx:if="{{lan=='en'}}">{{t10}}</view>

page/pageLanguage.js(网址跳转到小程序接受q参数) >>

onLoad(options) {
    if (options.q) {
      let qrUrl = decodeURIComponent(options.q)
      this.setData({
        cxid: this.getQueryString(qrUrl, 'cxid')
      })
    } else {
      this.setData({
        cxid: options.cxid
      })
    }
    this.loadJson(this.data.cxid);
  },
  getQueryString(url, name) {
    var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
    var r = url.substr(1).match(reg)
    if (r != null) {
      return r[2]
    }
    return null;
  },

Vant Weapp

Vant 是一个轻量、可靠的移动端组件库
在浏览器中输入：https://vant-contrib.gitee.io/vant-weapp/#/home

Vant Weapp 在“微信开发者工具”里安装Vant Weapp
# 通过 npm 安装
npm i @vant/weapp -S --production

修改 project.config.json
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],

注意：app.json里删除 "style": "v2", 不需要

配置完成，点击工具 >> 构建npm >> 成功提示

在app.json或index.json中引入组件

"usingComponents": { "van-button": "@vant/weapp/button/index" }

使用组件效果

代码

index.wxml文件
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

开启sass

开发辅助 /原生支持 TypeScript
在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/devtools/compilets.html

代码：

project.config.json 文件
"setting": {
"useCompilerPlugins": [
  "sass"
],

news.scss 文件
.box{
    .inner{
        .text{
            color:red;
            font-size:50rpx;
        }
    }
}

视图容器/view

在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

代码：

index.wxss文件
 <view class="box" hover-class="boxhover" 
 hover-stay-time="0"
 hover-start-time="0"
 >
 你好
    <view class="inner" 
    hover-stop-propagation
    hover-class="innerhover"
    >朋友</view>
 </view>


index.wxss文件
 .box{
     color:red;
     width:200px;
     height:200px;
     background:orange;
 }
 .boxhover{
     color:white;
     background: blue;
 }
 .box .inner{
     width:80px;
     height:80px;
     background:pink;
 }
 .box .innerhover{
     background:red;
     color:yellow;
 }

文本/text

在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

index.wxss文件
<view>aaaaa</view>
<view>bbbbb</view>
<text>111111</text>
<text user-select>222222</text>
<text>333333</text>

视图容器/scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px
在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

可快速输入 .row{$}*6 >> 按tab键

代码：

index.wxss文件
<scroll-view class="myScroll" scroll-x>
    <view class="row">1</view>
    <view class="row">2</view>
    <view class="row">3</view>
    <view class="row">4</view>
    <view class="row">5</view>
    <view class="row">6</view>
    <view class="row">7</view>
    <view class="row">8</view> 
</scroll-view>

index.wxss文件
 .myScroll{
    width:100%;
    height:220rpx;
    background: #eee;
    white-space: nowrap;
 }
 .myScroll .row{
     width:220rpx;
     height:220rpx;
     background: palegreen;
     margin-right:10rpx;
     display: inline-block;
 }
 /* 清除最右边空隙 */
 .myScroll .row:last-child{
     margin-right: 0px;
 }

视图容器/swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

代码：

index.wxss文件
<view class="banner">
    <swiper
    previous-margin="30rpx"
    circular
    autoplay
    interval="3000"
    indicator-dots
    indicator-active-color="#bda066"
    indicator-color="rgba(255,255,255,0.3)"
    >
        <swiper-item>
            <view class="item"><image src="/images/banner0.jpg" ></image></view>
        </swiper-item> 
        <swiper-item>
            <view class="item"><image src="/images/banner1.jpg" ></image></view>
        </swiper-item> 
        <swiper-item>
            <view class="item"><image src="/images/banner2.jpg" ></image></view>
        </swiper-item> 
        <swiper-item>
            <view class="item"><image src="/images/banner3.jpg" ></image></view>
        </swiper-item> 
    </swiper>
</view>

index.wxss文件
.banner{
    padding-top:30rpx;
}
.banner swiper{
    height:460rpx;    
}
.banner swiper-item image{
    width:690rpx;
    height:460rpx;
    border-radius:30rpx;
    
}

消息提示框showToast

在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

代码：

index.wxss文件
<button type="primary" bindtap="clickBtn">按钮</button>
<input type="text" style="background:#eee;"/>

index.js文件
    clickBtn(){
        wx.showToast({
            title:"发布成功",
            mask:true
        })
    },

模态对话框/showModal

在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

代码：

index.wxss文件
<button type="primary" bindtap="clickBtn">按钮</button>
<input type="text" style="background:#eee;"/>

index.js文件
    clickBtn(){ 
        wx.showModal({
            title:"是否删除",
            // content:"删除之后不可恢复，请谨慎删除",
            // showCancel:false
            cancelText:"我要取消",
            cancelColor:"#FF0000",
            editable:true,
            placeholderText:"请输入...",
            success:res=>{
                console.log(res)
            }
        })
    },

加载提示框showLoading

wx.showLoading 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

代码：

 index.js文件
    //监听页面加载
    onLoad(options){
        wx.showLoading({
            title:"加载中...",
            mask:true
        })
        setTimeout(()=>{
            wx.hideLoading()
        },2000)
    },

设置页标题setNavigationBarTitle

wx.setNavigationBarTitle显示动态设置当前页面的标题
在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html

代码：

 index.json文件
{
  "usingComponents": {},
  "navigationBarTitleText": "api学习"

}

index.js文件
    //监听页面加载
    onLoad(options){
        wx.setNavigationBarTitle({
            title:'onload中修改的标题'
        })
        wx.setNavigationBarColor({
            frontColor:'#000000',
            backgroundColor:'#eeeeee'
        })
    },

跳转页navigateTo

wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html

代码：

 index.wxml文件   reLaunch为能带参数的跳转方式
<navigator url="/pages/logs/logs?id=111" open-type="reLaunch">
go to logs 22
</navigator>

.js里实现跳转

代码：

 index.wxml文件 
<view
bind:tap="goLogs"
style="width:100rpx;height:100rpx;background: #EEE8AA;"
>
    <view>
        <text>go to logs</text>
    </view>
    <view></view>
</view>

index.js文件
    goLogs(){
        wx.redirectTo({
            url:'/pages/logs/logs'
        })
    },

网络请求request

wx.request 发起 HTTPS 网络请求。使用前请注意阅读相关说明。
在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

代码：

 index.wxml 文件 
<view class="out">
    <view class="box" wx:for="{{listArr}}"  wx:key='id'>
        <view class="pic">
            <image src="{{item.imgUrl}}" mode=""/>
        </view>
        <view class="name">
            姓名：{{item.title}}
        </view>
    </view>
</view>

index。wxss 文件
.out{
    padding:30rpx;
}
.out .box{
    width:100%;
    height:500rpx;
    border:1px solid #eee;
    margin-bottom: 30rpx;
}
.out .box .pic{
    width:100%;height:400rpx;
}
.out .box .pic image{
    width:100%;
    height:100%;
}
.out .box .name{
    text-align: center;
    line-height: 100rpx;
}

index.js 文件 
    //监听页面加载
    onLoad(options){ 
        this.getData();
    },
    
    getData(){
        wx.showLoading({
          title: '加载中...',
          mask:true
        })
        wx.request({
            url:'https://api.thecatapi.com/v1/images/search?limit=2',
            success:(res)=>{
                console.log(res);
                this.setData({
                    listArr:res.data
                })
                wx.stopPullDownRefresh();//停止当前页面下拉刷新。
            },
            complete:(err)=>{//调用成功、失败都会执行
                wx.hideLoading()
            }
        })
    },
    //监听用户下拉动作
    onPullDownRefresh() {
        this.setData({
            listArr:[]
        })
        this.getData();
    },

wx.request 第2个案例，加了下拉刷新 onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为px。 wx.showNavigationBarLoading 显示导航条加载动画，wx.hideNavigationBarLoading 隐藏导航条加载动画

代码：

 index.wxml 文件 
<view class="out">
    <view class="box" wx:for="{{listArr}}"  wx:key='id'>
        <view class="pic">
            <image src="{{item.imgUrl}}" mode=""/>
        </view>
        <view class="name">
            姓名：{{item.title}}
        </view>
    </view>
</view>

index。wxss 文件
.out{
    padding:30rpx;
}
.out .box{
    width:100%;
    height:500rpx;
    border:1px solid #eee;
    margin-bottom: 30rpx;
}
.out .box .pic{
    width:100%;height:400rpx;
}
.out .box .pic image{
    width:100%;
    height:100%;
}
.out .box .name{
    text-align: center;
    line-height: 100rpx;
}

index.js 文件 
    //监听页面加载
    onLoad(options){ 
        wx.showLoading({
          title: '加载中...',
          mask:true
        })
        this.getData();
    },
    
    getData(){
        wx.request({
            url:'https://api.thecatapi.com/v1/images/search?limit=2',
            success:(res)=>{
                console.log(res);
                let oldData=this.data.listArr;
                let newData=oldData.concat(res.data);
                console.log("newData",newData)
                this.setData({
                    listArr:newData
                })
                wx.stopPullDownRefresh();//停止当前页面下拉刷新。
            },
            complete:(err)=>{//调用成功、失败都会执行
                wx.hideLoading()
                wx.hideNavigationBarLoading();//隐藏导航条加载动画
            }
        })
    },
    //监听用户下拉动作
    onPullDownRefresh() {
        wx.showLoading({
          title: '加载中...',
          mask:true
        })
        this.setData({
            listArr:[]
        })
        this.getData();
    },
    //上拉触底事件
    onReachBottom() {   
        wx.showNavigationBarLoading();   
        this.getData();
    },


    index.json 文件  开启下拉功能  enablePullDownRefresh
{
  "usingComponents": {},
  "navigationBarTitleText": "api学习2",  
  "enablePullDownRefresh": true,
  "backgroundColor": "#00804D",
  "backgroundTextStyle":"light",
  "onReachBottomDistance":200
}

wx.request 页面交互添加标题

代码：

api3.wxml 文件 
<view class="out">
    <view class="form">
        <input model:value="{{iptVal}}" type="text" 
        placeholder="请输入用户名" 
        bindconfirm="onSubmit" />
    </view>

    <view class="row" wx:for="{{listArr}}" wx:key="i">
        <view class="username">
            标题5：{{item.title}}
        </view>
        <view class="time">时间：{{item.createtime}}</view>
    </view>

</view>

api3.wxss 文件 
.out{
    padding:30rpx;
}
.out .row{
    padding:15rpx;
    border-bottom:1px solid #ccc;
}


api3.js 文件 
  data: {
    iptVal:"",
    listArr:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { 
      this.getData()
  },

  getData(){
      wx.request({
        url: 'http://xiyueta/api/json/test.asp',
        method:"POST",
        header:{"Content-Type":"application/json"},
        data:{
            num:4
        },
        success:(res)=>{
            console.log(res.data.data)
            this.setData({
                listArr:res.data.data
            })
        }
      })
  },
  onSubmit(){
    console.log(this.data.iptVal)

    wx.request({
        url: 'http://xiyueta/api/json/test.asp?act=add',
        method:"POST",
        header:{"Content-Type":"application/json"},
        data:{
            title:this.data.iptVal
        },
        success:(res)=>{
            console.log(res) 
            if(res.data.status=="y"){
                wx.showToast({
                  title: res.data.info,
                })
                this.getData();//刷新
            }else{
                wx.showToast({
                  title: res.data.info,
                  icon:"error"
                })
            }
        }
      })
  },

自定义组件 / Component

在浏览器中输入：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

代码：

MyHeader.wxml 文件 
<view class="header">
    <view class="big">
        头部大标题
    </view>
    <view class="small">
        xiyueta小程序开发 {{name}}
    </view>
</view>

MyHeader.wxss 文件
.header{
    text-align: center;
    padding:30rpx;
}
.header .big{
    font-size:50rpx;
}
.header .small{
    font-size:38rpx;
    margin-top: 20rpx;
    color:#666666;
}

MyHeader.js 文件
  //组件的属性列表
  properties: {
    name:{
        type:String,
        value:"........"
    }
  },


api4.json
{
  "usingComponents": {
      "MyHeader":"/components/MyHeader/MyHeader"
  }
}
api4.wxml 文件 
<MyHeader name="作者：xx"></MyHeader>

全局css变量使用

app.wxss 文件里定义css变量名，在页面里引用这么定义好的颜色对应的变量名

代码：

app.wxss 文件 
view,text{
    box-sizing:border-box;
}
page {
    --themeColor: #bda066;
    --globalColor: #1a1b1c;
    --focusColor: #4c4d4e;
    --descColor: #7e8081;
    --greyColor: #8e8e8e;
    --subColor: #b1b2b3;
    --lightColor: #e4e4e4;
    --globalBgColor1: #e3e4e5;
    --globalBgColor2: #f6f7f8;
    --globalBgColor3: #ffffff;
}

index.wxml 文件
<text class="box">内容</text>

index.wxss 文件
.box{
    color:var(--themeColor);
}

一个完整案例

一个完整案例，

在app.js里输入 App >> 然后选择弹出里的 App选项 >> 自动生成代码


App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

在index.js里输入 Page >> 然后选择弹出的 Page选项 >>自动生成代码


Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

破解小程序

下载工具：https://github.com/biggerstar/wedecode
第一步：cmd >> git clone https://github.com/biggerstar/wedecode.git
第二种：cmd >> wedecode >> 拖文件到 >> 回车

双击桌面微信 >> 左边更多 >> 设置 >> 文件夹管理 >> 打开文件夹 >> Applet
C:\Users\xiaoyun\Documents\WeChat Files\Applet 双击软件 >> wedecode\decryption-tool\UnpackMiniApp.exe >> 选择微信下的小程序 cmd >> wedecode >> 拖文件到 >> 回车