微信小程序

tianruine

已于 2022-06-12 21:20:58 修改

阅读量839

点赞数

文章标签：微信小程序小程序前端

于 2022-06-09 22:04:09 首次发布

本文链接：https://blog.csdn.net/m0_66195841/article/details/125210908

版权

微信小程序发布流程

1.首先在master 开发工具上传代码dev的环境

2.体验版测试

3.master 代码环境变成线上环境

4.体验线上环境的小程序，线上的数据，测试

5.提交审核

6.在发布管理平台，将ischeck改为true，目的影藏内容，在导航栏不显示，（例子，在你申请公众号，在你提交你要卖酱油，但是你在上线你要卖酒，这样审核是通过不了的，所以，你在提交审核后不卖酒的tab隐藏起来）

7.审核通过后，在微信的管理平台发布小程序

8.将审核状态ischeck改为false

9.然后在自己编写的小程序管理平台配置，小程序更新的时候是强制更新还是非强制更新，通过传递一个变量是false还是true

// app.js
App({
  env: "pro",
  onLaunch (options) {
    console.log("小程序加载",options)
    // 冷启动会执行
    // 热启动不会执行 
    // 点击右上角关闭小程序并且在30分钟内再次打开
  },
  onShow (options) {
    console.log("小程序显示")
    const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log("是否有更新",res.hasUpdated)
})
 
updateManager.onUpdateReady(function () {
  const forceUpdate = false //从接口来，如果是false就不强制更新
  const isCheck = false  //通过接口修改，改成false,就可以逃过审核
  // 经营类目 日常用品  烟酒
  if(forceUpdate) {
    updateManager.applyUpdate()
  return false;
  }

  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})
  },
  onHide () {
    console.log("小程序隐藏")
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: {
    name: 123
  }
})

注意在更新请求的时候一般写在onShow生命周期里面，因为在onLaunch生命周期里面，只有冷启动才会触发，热启动不会触发

路由：

wx.switchTab

需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。如果没有在tabBar声明就会报错

wx.reLaunch

需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

wx.redirectTo

需要跳转的应用tabBar与非tabBar都行的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'

wx.navigateTo

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'

声明式导航

<navigator open-type="switchTab" url="/pages/logs/logs">声明式导航 switchTab</navigator>

事件：

  <view class="son" data-hehe="123" catchtap="clickSon" id="test">
//catchtap事件默认不会冒泡

微信支付的流程

首先前端调一下我方服务器的接口，把付多少钱，传到我方服务器，我放服务器先进行预下单，将多少钱，与订单给到微信的支付系统，这时在微信支付系统将会有一个地方存着这笔订单，并把一些参数返回给我方服务器，我方服务器把这些参数返回给小程序，小程序通过wx.requestpayment()这个接口，携带我放服务器返回来的参数把钱给到微信支付系统，微信支付系统在把钱，与这笔订单返回给我方服务器，我方服务器进行一些处理

localstonge

小程序中在前台存localstonge的时候，在ios系统中，在开发版本，测试版本，还有上线版本中，他们的localstonge是公用的

解决办法：就是在存与取得时候把环境变量带上，通过环境变量，取不同环境取该环境下的对应的localstonge

function setStorage(key, value) {
  wx.setStorageSync(`${env}_key`, value) //这里env的是变量对应的该环境是哪个环境
}

webview

webvie是用来在原生上承载H5网页的，是用来在原生与h5网页进行通信，例如网页可以通过挂载在webview来调用原生app里面的功能，例如调用相机来进行扫码，在小程序中，我们在做一些活动的时候，我们可以通过把这些活动做成一个网页，挂载服务器的静态资源目录下，然后在小程序中通过web-view来访问这些活动的地址，同样用户协议也可以这样做

例子：我们首先在3001的服务器创建了一个h5网页

webview.html

知识点:在页面可以通过 wx.miniProgram.postMessage进行传参，可以在webview 通过bindmessage事件接受内容并做修改

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内嵌webview的html页面</title>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script
      type="text/javascript"
      src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
    ></script> <!-- 微信的接口 -->
    <script>
      // VConsole 默认会挂载到 `window.VConsole` 上
      var vConsole = new window.VConsole();
    </script>
  </head>
  <body>
    <h1>内嵌webveiw</h1>
    <button id="login">请重新登录</button>
    <script>
      const url = "https://t7.baidu.com/it/u=1831997705,836992814&fm=193&f=GIF";
      document.getElementById("login").addEventListener("click", () => {
        wx.miniProgram.reLaunch({
          url: "/pages/my/my",
        });
      });
      // console.log(window.location);
      const search = window.location.search.split("?")[1] || "";
      // 不完整的的
      const token = search.split("=")[1];
      console.log(token);
      wx.miniProgram.postMessage({ //通过postMessage进行传参
        data: {
          title: "呵呵哒",
          imagePath: url,
          hehe: 123,
        },
      });
    </script>
  </body>
</html>

在小程序的webview里面

webview.wxml文件

知识点：通过bindmessage事件接受内容并做修改

<view>
<view>小程序中展示h5页面</view>
<web-view bindmessage="receiveMessage" src="{{url}}"></web-view>
</view>

webview.js

知识点;通过encodeURIComponent 进行解析

Page({
  data: {
    url: ''
  },
  onLoad(options) {
    const url  = decodeURIComponent(options.url)
    console.log(url)
    this.setData({url})
    //wx.hideHomeButton({})
  },
  receiveMessage(e) {
    console.log('接受post信息',e)
    const { title, imagePath } = e.detail.data[0] 
    console.log(title,imagePath)
    this.title = title,
    this.imageUrl = imagePath
  },
  onShareAppMessage() {
    return {
      title: this.title || '默认分享',
      imageUrl:this.imageUrl || 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF'
      
    }
  }
})

在小程序的活动页面里activelist.wxml

<view>
  <view>活动列表</view>
  <block wx:for="{{list}}" wx:key="index">
    <view data-url="{{item.url}}" data-login="{{item.isLogin}}" bindtap="jumpWebview">{{item.title}}</view>
  </block>
</view>

activelist.js

知识点：你再往webview进行跳转，携带的参数有两个？，所以用到encodeURIComponent进行操作

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      title:"幸运大转盘",
      url:"http://www.baidu.com",
      isLogin: false,
    },
    {
      title:"音乐播放器",
      url:"http://ustbhuangyi.com/music-next/#/singer",
      isLogin: false,
    },{
      title: "需要登录的活动",
      url:"http://localhost:3001/webview.html",
      isLogin: true,
    }]
  },
  jumpWebview(e) {
    console.log(e)
    const token = 'sdfmlskfjslfkjslfjkslkf'
    let {url, login } = e.target.dataset
    if(login) {
      url = `${url}?token=${token}`
    }
    console.log(login, url)
    
    wx.navigateTo({
      url: `/pages/webviewdemo/webview?url=${encodeURIComponent(url)}`,
    })
  }
})

总结：

原因1.经常改变的页面活动页面原生小程序开发修改复杂没有时效性

原因2.某些页面app和小程序通用都做原生成本高做成h5用webview承载

1.webview 在小程序中显示h5网页

2.只有在小程序后台配置了 webview 业务域名的才能在小程序里使用

3.h5的页面应该怎么做？

* 静态页面用户协议 -> 页面生成器

* 用户状态

小程序的token 传给h5的页面是否能用，

我们的可用，我们的用户系统已经和微信手机号登录，密码登录，实现关联统一token可用

4.在内嵌的h5页面发现小程序的传递过来token失效如何处理

通知小程序重新登录

5. webview 分享当前页面分享的内容应该由内嵌的h5页面决定

在h5页面通过postmessage 传递自定义分享内容

小程序里通过 bindmessage 接受内容并做修改

tianruine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序

1.首先在master 开发工具上传代码dev的环境2.体验版测试3.master 代码环境变成线上环境4.体验线上环境的小程序，线上的数据，测试5.提交审核6.在发布管理平台，将ischeck改为true，目的影藏内容，在导航栏不显示，（例子，在你申请公众号，在你提交你要卖酱油，但是你在上线你要卖酒，这样审核是通过不了的，所以，你在提交审核后不卖酒的tab隐藏起来）7.审核通过后，在微信的管理平台发布小程序8.将审核状态ischeck改为false9.然后在自己编写的小程序管理平台配置，小程序更新的时候是
复制链接

扫一扫