小程序原生框架开发文档,从开发到上线

小程序开发相关地址

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
申请小程序帐号:https://mp.weixin.qq.com/
安装开发工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序后台:https://mp.weixin.qq.com/

小程序环境区分

目前官方并没有出相关的api供开发者使用,网上部分人是__wxConfig.envVersion,此方案部分基础库会取消,不兼容,所以目前只能通过手动切换环境的方法来执行不同的代码。但需要谨慎的是,上线提审前需要记得重新手动切换环境。没有切换环境,不会影响接口(因为目前小程序接口是会根据DNS自动调用不同环境的接口),但是会影响埋点。

小程序项目结构

pages->页面
app.js全局js
app.json全局配置
app.wxss全局样式
project.config.json项目配置
sitemap.json页面收录配置

小程序导入项目

微信开发者工具,选择导入,选择项目文件夹,选择“不使用云服务”(新版微信开发者工具会默认使用微信云开发)
在这里插入图片描述

小程序新建页面

例:需要新建一个页面,hello,先在pages文件夹下新建文件夹index,然后在index文件夹右键选择新建page,就会自动生成同名的4个文件
在这里插入图片描述
在这里插入图片描述

小程序更新机制

非常重要的一步,如果需要开发新的小程序,第一期必须加,否则后期将出现用户必须删除小程序重新进入才能更新的情况,(需要使用wx.getUpdateManager这个api,可参考下面这个方法,需要在onLaunch或者在首页onShow等生命周期执行这个方法,保证每次用户进入小程序后能够调用)

  // 小程序检查/更新版本
  checkUpdateVersion() {
    // 检测是否可以调用getUpdateManager检查更新
    if (!wx.canIUse("getUpdateManager")) return
    //创建 UpdateManager 实例
    const updateManager = wx.getUpdateManager()
    //检测版本更新
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        //监听小程序有版本更新事件
        updateManager.onUpdateReady(function () {
          wx.showModal({
            title: '更新提示',
            content: '新版本已经准备好,是否重启应用?',
            success(res) {
              if (res.confirm) {
                // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate()
              }
            }
          })
        })

        updateManager.onUpdateFailed(function () {
          // 新版本下载失败
          wx.showModal({
            title: '已经有新版本咯~',
            content: '请您删除当前小程序,到微信 “发现-小程序” 页,重新搜索打开呦~',
          })
        })
      }
    })
  },

小程序域名配置

  • 在小程序开发过程中,可以使用开发者工具,选择不校验域名,进行开发,但是建议刚开始开发项目时不使用这个功能,将遇到的错误域名记录起来统一配置

  • ps:由于域名配置每月有限制次数,其中服务器域名每月支持修改50次(以前是5次),每类服务器域名最多可添加200个)。业务域名以前也是有限制次数的,现在没有了

  • 服务器域名包含服务器域名(wx.request),socket合法域名,uploadFile合法域名(没记错的话应该是wx.uploadFile),downloadFile合法域名(没记错的话应该是wx.downloadFile/wx.saveImageToPhotosAlbum),udp合法域名,udp合法域名。具体需要配置在哪个域名,可根据错误提示配置。

  • 业务域名:配置为业务域名后,可调用web-view组件在小程序中打开,也就是小程序嵌入的H5页面的域名。配置域名业务需要该域名放置一个指定文件,需要找运维配合。

    在这里插入图片描述
    在这里插入图片描述

小程序版本

开发版:开发中,微信开发者工具直接扫码预览效果即为开发版,需要有小程序的开发者权限才能预览
体验版:在开发中工具中右上角菜单中上传代码后,在小程序后台中,可以选择某个版本为体验版,有小程序的开发者权限/体验者即可扫码体验版二维码预览
正式版:发布后的小程序

小程序开发流程

开发阶段
可通过微信开发者工具直接调试 或者 微信开发者工具–预览–二维码预览
注意点:开发过程中,如果新增的域名需要配置,需要在后台配置好,并且确认域名是否和测试/线上域名一致,不一致的话,还需要同时配置测试/线上域名,防止提测或者提审的时候因为域名导致的错误。
在这里插入图片描述

测试阶段
修改为测试环境,通过微信开发者工具,右上角点击上传,上传成功后,打开小程序后台–版本管理–开发版本–选择对应的版本的下箭头–选为体验版本–点击对应版本号下面的二维码发给测试人员,并在成员管理中把测试人员的微信添加为体验成员
在这里插入图片描述在这里插入图片描述在这里插入图片描述

上线阶段
(修改为正式环境,通过微信开发者工具,右上角点击上传,上传成功后,打开小程序后台–版本管理–开发版本–选择对应的版本–提交审核–已提审)目前腾讯的审核进度还是蛮快的,基本都是当天或者第二天就有审核结果了。
审核通过后,打开小程序后台–版本管理–审核版本–选择对应的版本–发布–全量发布–上线完成
审核不通过,根据不通过的结果,调整代码或者流程(也可能是服务类目不符合等),重新提交审核,等待审核结果

开发建议

This指向
app.js的this改成app(即最外层定义app,onLaunch中app = this,在app.js中所有方法直接使用app替换this)
page的this改成that(即最外层定义that,onLoad中that= this,在app.js中所有方法直接使用that替换this)
page获取app实例,命名为app(即const app = getApp())
原因是,在开发的过程中,当某个方法重复性使用时,需要将page中的方法直接抽离到app.js公共使用,此时可以直接将方法搬过去,方法中包含页面的this或者app实例也无需改变

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值