学习呦
20 3月 2026 10 min read

微信小程序

Written by 米豆

资料

文档相关

  1. 开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
  2. 微信公众平台：https://mp.weixin.qq.com/

开发者工具
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  1. 开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
  2. 微信公众平台：https://mp.weixin.qq.com/

基础语法

小程序代码构成

参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

小程序基本结构

<view class="container">  
  <view class="userinfo">  
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>  
    <block wx:else>  
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>  
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>  
    </block>  
  </view>  
  <view class="usermotto">  
    <text class="user-motto">{{motto}}</text>  
  </view>  
</view>

小程序基本操作

  • 配置信息

    • 全局配置 -> https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

      {
       “pages”: [
         “pages/index/index”,
         “pages/logs/index”
      ],
       “window”: {
         “navigationBarTitleText”: “Demo”
      },
       “tabBar”: {
         “list”: [{
           “pagePath”: “pages/index/index”,
           “text”: “首页”
        }, {
           “pagePath”: “pages/logs/index”,
           “text”: “日志”
        }]
      },
       “networkTimeout”: {
         “request”: 10000,
         “downloadFile”: 10000
      },
       “debug”: true
      }

    • 页面配置

      {
       “navigationBarBackgroundColor”: “#ffffff”,
       “navigationBarTextStyle”: “black”,
       “navigationBarTitleText”: “微信接口功能演示”,
       “backgroundColor”: “#eeeeee”,
       “backgroundTextStyle”: “light”
      }

  • 全局生命周期函数

     /**
      * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
      /
     onLaunch: function () {
       
    },
    ​
     /    *
      * 当小程序启动，或从后台进入前台显示，会触发 onShow
      /
     onShow: function (options) {
       
    },
    ​
     /    *
      * 当小程序从前台进入后台，会触发 onHide
      /
     onHide: function () {
       
    },
    ​
     /    *
      * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
      */
     onError: function (msg) {
       
    }

    onLoad: function(options) {
       // 页面创建时执行
    },
     onShow: function() {
       // 页面出现在前台时执行
    },
     onReady: function() {
       // 页面首次渲染完毕时执行
    },
     onHide: function() {
       // 页面从前台变为后台时执行
    },
     onUnload: function() {
       // 页面销毁时执行
    },
     onPullDownRefresh: function() {
       // 触发下拉刷新时执行
    },
     onReachBottom: function() {
       // 页面触底时执行
    },
     onShareAppMessage: function () {
       // 页面被用户分享时执行
    },
     onPageScroll: function() {
       // 页面滚动时执行
    },
     onResize: function() {
       // 页面尺寸变化时执行
    }

  • 组件生命周期->https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

    Component({
     lifetimes:{
       created() {
         console.log(‘created,组件实例刚刚被创建好时， created 生命周期被触发’)
      },
       attached() {
         console.log(‘组件实力进入页面节点树时候进行执行’);
      },
       detached() {
         console.log(‘在组件实例被从页面节点树移除时执行’);
      }
    }
    })

  • 界面跳转

  • 数据绑定

    Page({
     data:{
       message:”hello world”
    }
    })

  • 条件渲染

    条件判断显示

    Page({
    data:{
    isShow:false
    }
    })

  • 列表渲染

    :

    Page({
     data: {
       list:[
        {name:’a’},
        {name:’b’}
      ]
    }
    })

↑