个人如何申请注册微信小程序

（注：如果注册小程序请按步骤操作）

一、申请前准备：

1. 微信持有人以及邮箱持有人已满18周岁

2. 一个未注册微信（服务号、订阅号、小程序）的邮箱。

二、申请步骤

1. 准备一个未注册微信（服务号、订阅号、小程序）的邮箱，如果没有，请到相关邮箱网站去申请一个；

2. 进入微信公众号平台，点击右上角“立即注册”按钮，开始注册；

3. 选择类型。在页面选择需要注册的类型，点击“小程序”；

4. 填入邮箱。填写邮箱、设置密码、填写验证码，勾选同意协议后点击“注册”按钮；

5. 邮箱激活。进入你的邮箱进行验证，微信会发送一封邮件至邮箱，在邮箱内点击链接即可；

6. 信息登记。选择主体类型为“个人”，填写主体相关资料，并用绑定主体银行卡的微信扫描二维码进行验证，然后“提交”，提交后会弹出警告信息“主体信息一经提交不能进行修改”，确认无误后点击“确认”；

7. 成功注册。提交完毕就成功注册属于你的小程序，不过这只是注册了一个账号，后续还需要进行完善信息和对小程序进行开发和发布才能使用；

三、注意事项：

1. 邮箱不能注册过微信的相关账号；

2. 主体信息提交后不能进行修改。

小程序的开发

（注：在这之前需要安装微信开发者工具（当然你也可以选择nui-app来做微信小程序开发，使用极客开发工具HBuilder X），并且认真阅读微信官方文档·小程序）,做好这些准备工作后我们就可以写代码了

一、保存自己的appId

（注 : 这很重要，在之后每创建一个项目都需要用到）

搜索引擎搜索微信公众平台 》 开发 》 开发设置 》 开发者id 》 找到自己的appID 》在本地创建个文件保存起来（前提保证自己微信公众平台在登陆成功状态）

二、登入微信开发者工具（开始你的编程之旅）

1. 首先运行小程序开发者工具 》 扫码登陆 》 选择小程序项目 》 使用微信开发者工具创建小程序项目 》 使用微信开发者工具创建小程序项目 》 进入小程序项目的创建窗口 》 项目目录是一定要填写的 》 这里就需要你之前保存的appID了 》 项目名称可以随便填写了 》以上都填写完成后,点确定

2. 微信小程序界面 顶部为工具栏，界面的设置修改，模拟器/编辑器/调试器的开关 左侧为手机模拟器 右上侧为文件结构与代码编辑框 右下侧为调试器

三、全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。完整配置项说明请参考小程序全局配置

四、页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。完整配置项说明请参考小程序页面配置

五、sitemap 配置(控制台索引的关闭)

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。完整配置项说明请参考小程序 sitemap 配置

解决方法如下：打开project.config.json，在setting下面增加 “checkSiteMap”: false

  "setting": {
    "checkSiteMap": false
  }

原文地址：https://blog.csdn.net/Poppy_LYT/article/details/99677106

六、注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档 。

七、注册页面

使用 Page 构造器注册页面

在js文件中输写page 》 按tab/enter来实现注册

开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

详细的参数含义和使用请参考 Page 参考文档 。

八、生命周期

九、页面路由

在小程序中所有页面的路由全部由框架进行管理。

路由方式

开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

参数参考：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

注意:

• navigateTo, redirectTo 只能打开非 tabBar 页面。

• switchTab 只能打开 tabBar 页面。

• reLaunch 可以打开任意页面。

• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

• 调用页面路由带的参数可以在目标页面的onLoad中获取。

十、模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

注意：

• exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。

• 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。

  npm安装参考：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

十一、文件作用域

在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。

十二、API

小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。详细介绍请参考 API 文档。

通常，在小程序 API 有以下几种类型：

事件监听 API

我们约定，以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。

这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

代码示例

  try {
    wx.setStorageSync('key', 'value')
  } catch (e) {
    console.error(e)
  }

同步 API

我们约定，以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，详情参见 API 文档中的说明。

同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。

代码示例

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

异步 API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：

1. Object 参数说明

2. 回调函数的参数

success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段：

异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值，可以用来实现更丰富的功能，如 wx.request，wx.connectSocket 等。

代码示例

  wx.login({
    success(res) {
      console.log(res.code)
    }
  })

3. 异步 API 返回 Promise

基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

注意事项

1. 部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。

2. 当没有回调参数时，异步接口返回 promise。此时若函数调用失败进入 fail 逻辑， 会报错提示 Uncaught (in promise)，开发者可通过 catch 来进行捕获。

3. wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。

代码示例

<!-- callback 形式调用 -->
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

<!-- promise 形式调用 -->
wx.chooseImage().then(res => console.log('res: ', res))

wx.chooseImage().then(res => console.log('res: ', res))</pre>

视图层 View

开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/

小程序运行时

开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/env.html

十三、基础能力

网络

在小程序/小游戏中使用网络相关的 API 时，需要注意下列问题，请开发者提前了解。

1. 服务器域名配置

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信。

从 2.7.0 开始，提供了 UDP 通信（wx.createUDPSocket)。

配置流程

服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意：

• 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；

• 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；

• 可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。

• 如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。

• 域名必须经过 ICP 备案；

• 出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；

• 对于每个接口，分别可以配置最多 20 个域名。

2. 网络请求

超时时间

• 默认超时时间和最大超时时间都是 60s；

• 超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置。

使用限制

• 网络请求的 referer header 不可设置。其格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；

• wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个；

• wx.connectSocket 的最大并发限制是 5 个。

• 小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。

返回值编码

• 建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。

• 小程序会自动对 BOM 头进行过滤（只过滤一个BOM头）。

回调函数

• 只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。

3. 常见问题

HTTPS 证书

小程序必须使用 HTTPS/WSS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验，如果校验失败，则请求不能成功发起。由于系统限制，不同平台对于证书要求的严格程度不同。为了保证小程序的兼容性，建议开发者按照最高标准进行证书配置，并使用相关工具检查现有证书是否符合要求。

对证书要求如下：

• HTTPS 证书必须有效；

  • 证书必须被系统信任，即根证书被已系统内置

  • 部署 SSL 证书的网站域名必须与证书颁发的域名一致

  • 证书必须在有效期内

  • 证书的信任链必需完整（需要服务器配置）

• iOS 不支持自签名证书;

• iOS 下证书必须满足苹果 App Transport Security (ATS) 的要求;

• TLS 必须支持 1.2 及以上版本。部分旧 Android 机型还未支持 TLS 1.2，请确保 HTTPS 服务器的 TLS 版本支持 1.2 及以下版本;

• 部分 CA 可能不被操作系统信任，请开发者在选择证书时注意小程序和各系统的相关通告。

  • Chrome 56/57 内核对 WoSign、StartCom 证书限制周知

证书有效性可以使用 openssl s_client -connect example.com:443 命令验证，也可以使用其他在线工具。

除了网络请求 API 外，小程序中其他 HTTPS 请求如果出现异常，也请按上述流程进行检查。如 https 的图片无法加载、音视频无法播放等。

跳过域名校验

在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。

如果手机上出现 “打开调试模式可以发出请求，关闭调试模式无法发出请求” 的现象，请确认是否跳过了域名校验，并确认服务器域名和证书配置是否正确。

十四、局域网通信

开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/mDNS.html

其余详细介绍参考微信开发者文档。。。

小程序的使用

自定义 tabBar

使用流程

1. 配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

示例：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

微信开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

轮播图的使用 swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

微信开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

图片比例缩放 image（通过mode属性控制）

开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

网络请求

代码示例：

wx.request({
  url: 'test.php', //接口路径
  data: {//请求所需参数
    x: '',
    y: ''
  },
  header: {//请求头
    'content-type': 'application/json' // 默认值
  },
  success (res) {//成功回调
    console.log(res.data)
  },
  fail(err){//失败回调
      console.log(err)
  },
  complete(){//调用结束的回调函数（调用成功、失败都会执行）
      console.log('请求结束')
  }
})

微信开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

消息提示框wx.showToast(Object object)

代码示例：

wx.showToast({
  title: '成功',//有icon图标时title最多显示7个汉字，没有时最多显示两行
  icon: 'success',//success成功图标，loading加载图标，none不显示图标
  duration: 2000//提示的延迟时间
})

微信开发者文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

修改各页面导航文字

在json中更改

{
    "navigationBarTitleText": "首页"
}

在js中修改

wx.setNavigationBarTitle({
  title: '当前页面'
})

本地存储同步异步

异步

wx.setStorage({
  key:"key",
  data:"value"
})

同步

 wx.setStorageSync('key', 'value')

微信开发者文档：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

扩展能力里面有一些很好用的组件和图标

微信开发者文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

书写时间：2020.04.08