总结小程序开发文档

分类：微信小程序作者：编程之家用户

小程序开发总结

最近领导交给一个任务，单独开发一个小程序项目，还要出一篇小程序课题文档。这也是我第一次接触小程序，遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结：

1. 如何创建小程序项目

这一步在官方文档中的描述已经很清楚了，主要分为几步：

  1. 申请账号，拥有小程序账号。
  2. 在小程序管理平台，可以看到小程序的 AppID与AppSecret。

绑定在一个微信开放平台账户下的订阅号、服务号、小程序、APP、PC网站都叫做”应用“，每个应用都有自己的AppID和AppSecret，AppID叫做应用唯一标识，AppSecret叫做应用密钥。

AppID与AppSecret 的作用及使用方式：
在开发过程中如果要使用微信相关功能，必须有官方认证的账号密码
小程序项目中app.js的data需要添加appid和secret属性，二者配合使用，可调用公众号的接口能力

  1. 管理员需要将开发人员的微信号设置为开发者账号才可以进行小程序的开发
  2. 安装开发工具
  3. 简要介绍开发工具
    微信小程序和公众号开发有自己的微信开发工具，集成了公众号网页调试和小程序调试两种开发模式。
  • 使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK 详情
  • 使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

    在这里插入图片描述

  1. 增加了支持甘特图的mermaid语法1 功能；

（相关学习推荐：小程序开发教程）

2. 如何获取微信账号信息及与第三方账号做绑定（小程序启动的过程都经历了哪些东西）

功能性的小程序一般都需要获取用户的微信账号信息。最初小程序可以在首次进入时调用wx.getUserInfo(Object object) 弹窗微信授权，后来接口getUserInfo做了调整，在用户未授权过的情况下调用此接口，将不再出现授权弹窗，会直接进入 fail 回调。在用户已授权的情况下调用此接口，可成功获取用户信息。
现在小程序获取授权需要通过button组件的bindgetuserinfo属性，配合open-type属性，实现点击按钮返回获取到的用户信息：

<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler">
小程序的启动：

. 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
. 紧接着通过 app.json 的 pages 字段就可以知道当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。
. 于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。
. 小程序启动之后，在 app.js 定义的 App 实例的 onLaunch（小程序启动时触发） 回调会被执行

我的小程序在app.js的onLaunch 方法中都执行了哪些操作：
1.项目启动时执行 wx.getSetting() 获取用户的当前设置，判断用户是否已授权
2. 如果用户已授权，调用wx.getUserInfo()获取用户信息，头像昵称等，然后进行自己小程序的内部操作
3. 如果用户未授权，则跳转至登录页，用户通过点击按钮弹窗授权，获取用户信息

未授权跳转登录页


点击获取信息按钮弹窗授权

// app.js onShow: function () {
    var that = this
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              that.globalData.userInfo = res.userInfo              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (that.userInfoReadyCallback) {
                that.userInfoReadyCallback(res)
              }
              // 执行项目内部操作
              that.onLogin()
            }
          })
        }else{
          // 没有授权，跳转授权登录页
          wx.redirectTo({
            url: '/pages/login/login',
          })
        }
      }
    })
  },
<!--login.wxml --><button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" >允许获取公开信息</button>
// login.jsonGetUserInfo: function (e) {
   app.globalData.userInfo = e.detail.userInfo  // 返回的用户信息}

如果需要将微信账号信息与自己的项目账号做绑定，那么可以将获取到的微信账号信息作为参数传送给后台，后台生成一个相对应的项目账号。

3. 小程序配置 : 全局&页面

全局配置

app.json是小程序的全局配置，包括小程序的所有页面路径、界面表现、底部 tab 等，一般包含几个字段：pages、window、tabBar

在这里插入图片描述


pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
tabBar字段 —— 定义小程序底部tab栏的表现，以及 tab 切换时显示的对应页面。

{
  "pages": [
    "pages/index/index", 
    "pages/logs/index"
  ], // 所有页面路径
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }, // 界面表现
  "tabBar": {
    "backgroundColor": "#F7F7FA",
    "color": "#757575",
    "selectedColor": "#6D8FE8",  // 底部栏配置
    "list": [  // tab列表
      {
        "pagePath": "pages/message/index/index",  // tab对应页面路径
        "text": "消息", // tab文字显示
        "iconPath": "images/icon_message.png",  // tab默认显示图标
        "selectedIconPath": "images/icon_message_blue.png" // tab选中后的图标
      },
      {
        "pagePath": "pages/zone/index/index",
        "text": "空间",
        "iconPath": "images/icon_friend.png",
        "selectedIconPath": "images/icon_friend_blue.png"
      }
  }
 }

注： tab栏的图标icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片，同时tab列表配置最少2个，最多5个。

页面配置

一个小程序页面由四个文件组成：

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

每个小程序页面可以使用自己的.json文件来对本页面的窗口表现进行配置。
页面配置一般包括导航栏标题文字内容（navigationBarTitleText），是否开启下拉刷新（enablePullDownRefresh）等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarTitleText": "个人中心",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"}

4. 小程序组件及页面介绍

小程序为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
组件是视图层的基本组成单元，一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内，例如：

<view class="main_info">这是内容</view>

注意：所有组件与属性都是小写，以连字符-连接

小程序组件参考。

页面的生命周期：

onLoad

  1. 小程序注册完成后，加载页面，触发onLoad方法。

  2. 页面载入后触发onShow方法，显示页面。

  3. 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

  4. 当小程序后台运行或跳转到其他页面时，触发onHide方法。

  5. 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

  6. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

页面之间的通讯

小程序页面之间有时需要进行数据的传递，个人使用的页面间数据通讯有两种方式：

  1. 页面A跳转到页面B时，在页面路由后携带参数，页面B在onLoad时获取options中的参数。
    页面A：
	wx.navigateTo({
      url: '../unrelate/unrelate?cname='+cname+'&cid='+cid,
    })

页面B：

onLoad: function (options) {
    if(options.cname){
      this.setData({
        cname: options.cname,
        cid: options.cid      })
    }
  }
  1. 如果页面之间需要传递的参数为对象或者数组，那么通过路由拼接参数的形式就不可取了，此时可以通过app.js中的globalData全局变量进行赋值。
    页面A：
  onJumpToNextLevelPoint: function(e){
    let child = e.currentTarget.dataset.child    let name = e.currentTarget.dataset.name    if(util.isValidArray(child)){
      app.globalData.pointChild = child // 全局变量进行赋值
      wx.navigateTo({
        url: '../knowledge/knowledge?name=' + name,
      })
    }
  }

页面B：

  onLoad: function (options) {
    if (util.isValidArray(app.globalData.pointChild)) {
      this.setData({
        progressList: app.globalData.pointChild      })
    }
  }

5. 如何开发公共代码

开发公共组件，个人使用的是component构造器定义公共组件。
Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
具体开发方式是：

  1. 项目外层目录中创建components文件夹，创建组件文件夹然后新建Component，在这里写好公共组件的页面结构，样式，事件等。

    在这里插入图片描述


    组件的js文件中包含组件属性，组件数据，组件方法等，与vue组件有相似之处。
    properties是组件的对外属性，比如引用组件的页面传递给公共组件的值就通过properties来接收。

    在这里插入图片描述

  2. 在需要使用公共组件的页面JSON文件中，添加usingComponents配置，使用公共组件，key值是组件要在页面中使用时的标签名，val是公共组件的路径。

    在这里插入图片描述


    在页面的wxml文件中，使用json定义的公共组件标签，引用公共组件，并传递数据：

    在这里插入图片描述

  3. 公共组件中通过properties接收引用页面传递的值，然后使用{{}}在组件页面进行数据绑定即可。

6. 如何使用微信提供的API

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。
调用微信扫一扫功能：

	wx.scanCode({        //扫描API
      success: function (res) {
        that.setData({
          IMECode: res.result        });
        // 接下来执行自己的业务逻辑
        that.ChkWXZIme(res.result)
      }
    })

调起本地相册选择图片或使用相机拍照功能（适用于更换头像）：

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths
        that.setData({
          'userInfo.Avatar': tempFilePaths[0]
        })
      },
      fail() {
        that.setData({
          chooseImg: false
        })
      }
    })

发起网络请求：

	wx.request({
      url: ''
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        session: app.globalData.session      },
      success: function(res){}
    })

更多的 API 能力见 小程序的API。

7. 代码的审核与发布

提交审核

为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。

在开发者工具中上传了小程序代码之后，登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。

在开发版本的列表中，点击 提交审核 按照页面提示，填写相关的信息，即可以将小程序提交审核。

需要注意的是，请开发者严格测试了版本之后，再提交审核， 过多的审核不通过，可能会影响后续的时间。

发布

审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录 小程序管理后台 - 开发管理 - 审核版本中可以看到通过审核的版本。

请点击发布，即可发布小程序。

附：版本号书写规范

major.minor.patch
主版本号.次版本号.修补版本号

patch： 修复bug，兼容老版本
minor：新增功能，兼容老版本
major：新的架构调整，不兼容老版本

相关学习推荐：微信小程序教程

以上就是总结小程序开发文档的详细内容，更多请关注编程之家其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

微信小程序订阅消息
概述 消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。 订阅消息推送位置：服务通知 订阅消息下发条件：用户自主订阅 订阅消息卡片跳转能力：点击查看详情可提爱转至该小程序的页面 消息类型 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后，后续服务
判断H5页面环境在微信中还是小程序中
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 &lt;script type=&quot;text/javascript&quot; src=&quot;https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种，一个完整的项目写下来，用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是：data-index=&quot;{{index}}&quot
H5页面判断是否是微信小程序打开
H5项目接入微信授权登录，通过 UA 区分微信还是普通浏览器： let&#160;ua&#160;=&#160;navigator.userAgent.toLowerCase(); let&#160;isWeixin&#160;=&#160;ua.indexOf(&#39;micromessenge
微信小程序获取data-xx=""属性的值，自定义属性设置和获取（data-）
微信小程序获取data-xx=&quot;&quot;属性的值，自定义属性设置和获取（data-） 微信小程序&lt;view class=&quot;details-btn&quot; data-taskId=&quot;111&quot; bindtap=&#39;taskdetails&#39
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0（或者当前的） -&gt; 2.14.1 解决问题
H5跳转微信小程序-成功案例（VUE）（踩坑无数）
H5跳转微信小程序-成功案例（VUE）（踩坑无数） TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点： 1、已认证的服务号 2、绑定JS接口安全域名 （在微信公众平台设置） 3、IP白名单 （在微信公众平台设置） 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解，需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也
小程序运行程序
情景1.拉取公司代码演示： 因为github有墙，这里我们以gitee(码云)为例作为演示 (其实就是国产github，也非常好用~) 步骤一：打开Git界面 先在一个空文件夹右击Git Bash Here，打开git界面 步骤二：输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序？
如何开发微信小程序？ 作为一名10多年一直从事互联网平台开发的从业者，我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤， 老张带您捋一捋整个环节，小白用户可以收藏了。 好了废话不多说，开始！ 一、开发前小程序需要准备的资料 我们在开发微信小程序前，需要准备下相关资料。这个资料主要是后
微信小程序getApp()和App()方法讲解
 
原生小程序开发优化方案
原生小程序开发优化方案 为了更好的制定优化方案，我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同，依然是浏览器内核，而不是原生客户端。 而对于传统的网页来说，UI 渲染和 JS 脚本是在同一个线程中
优化小程序大小
1，不要下两倍尺寸的图片， 小程序本身自己就会对元素缩小两倍，设计图片的一杯就已经很清晰了。 2，图片压缩，（主要是压缩静态资源，ps 可以压缩，然后有一些在线压缩工具，保持600-800kb 的静态） 3，通用的代码组件化 4，是在工程量太大可以分包，分包现在最大支持20m（一般都不会去分包的）
能取代90%的人的工作的ChatGpt到底牛在哪？
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT，上线两个月就已经超过一亿用户，成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈，引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛，虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现？它到底会不会取代搜索引擎？90%的人真的会因为ChatG
微信小程序开发知识点
文章浏览阅读193次。8. 导航和路由管理：掌握小程序的导航方式，如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等，学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构：了解小程序的定义、特点以及与传统APP的区别，掌握小程序的运行环境、组件和API等基本概念。10. 支付功能：学习小程序的支付方式，如微信支付、支付宝支付等，了解支付流程和注意事项，学会实现小程序的支付功能。9. 用户授权和登录：了解小程序的用户授权机制，如获取用户信息、调用微信API等，学会实现用户的登录和注册功能。_微信小程序开发知识点总结
微信小程序斗地主完整代码及步骤
文章浏览阅读4.8k次，点赞7次，收藏18次。一、准备工作1. 安装微信开发者工具，并登录微信小程序账号；2. 准备斗地主游戏的图片资源；3. 准备斗地主游戏的音效资源；二、创建小程序1. 打开微信开发者工具，点击“新建小程序”，输入小程序名称，选择小程序的项目目录，点击“创建”；2. 在小程序的项目目录中，新建文件夹“images”，将准备好的斗地主游戏的图片资源放入“images”文件夹中；3. 在小程序的项目目录中，新建文件夹“sounds”，将准备好的斗地主游戏的音效资源放入“sounds”文件夹中；三、编写代码1. 在小程_扑克牌微信小程序代码
微信小程序狼人杀游戏代码及步骤
文章浏览阅读3.9k次，点赞3次，收藏7次。一、准备工作：1. 安装微信开发者工具，创建小程序项目；2. 准备游戏角色图片；3. 准备游戏背景音乐；二、实现步骤：1. 创建游戏页面，添加游戏角色图片，添加游戏背景音乐；2. 创建游戏角色类，定义游戏角色属性，如角色名称、角色图片、角色能力等；3. 创建游戏类，定义游戏属性，如游戏人数、游戏角色、游戏规则等；4. 创建游戏控制类，定义游戏流程，如游戏开始、游戏结束、游戏角色分配等；5. 创建游戏界面，实现游戏流程，如游戏开始、游戏结束、游戏角色分配等；6. 创建游戏结果页面，显示游戏_微信小程序游戏代码
开发微信小程序模拟聊天步骤及代码
文章浏览阅读1.7k次。1. 创建小程序项目：使用微信开发者工具创建一个小程序项目，并在项目中添加一个页面，用于模拟聊天。 2. 定义数据结构：定义一个数据结构，用于存储聊天记录，包括发送者、接收者、消息内容等信息。 3. 实现聊天功能：实现聊天功能，包括发送消息、接收消息、显示消息等功能。 4. 实现界面：使用微信小程序的界面框架，实现聊天界面，包括聊天记录列表、输入框等。代码示例：// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
微信小程序开发商城详细步骤
文章浏览阅读2.1k次。1、创建小程序项目：使用微信开发者工具，新建一个小程序项目，输入项目名称，选择项目目录，点击“创建”按钮，即可创建小程序项目。2、添加页面：在小程序项目中，可以添加多个页面，每个页面都有自己的页面文件，比如首页、分类页、购物车页、我的页面等。3、添加组件：在小程序项目中，可以添加多个组件，比如商品列表组件、购物车组件、订单组件等，用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口：在小程序项目中，可以添加多个接口，用于获取商品信息、购物车信息、订单信息等，以便在页面中显示。5、_微信开发者工具做一个我的商城
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot