微信小程序开发

• 0、taro微信小程序

      // 1、通过npm安装脚手架
      npm install -g @tarojs/cli
      // 2、查看版本信息
      npm info @tarojs/cli
      // 3、

• A、公众号H5页面中打开小程序（开放标签）

  参考官网链接 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
  // 1、现在main.js中注册要使用的微信组件
  Vue.config.ignoredElements = ['wx-open-launch-weapp']
  // 2、在页面中添加按钮，要点击的操作，其中username为小程序的原始ID，后面path可以指定跳转页面
  
      <wx-open-launch-weapp
          id="launch-weapp1"
          username="gh_b556d947231f"
          path=""
          @launch="onLaunch"
          @error="onError"
          @ready="onReady"
          >
          <script type="text/wxtag-template">
          <div style="font-size: 14px;margin-top: 10px;text-align: center;border: 10px solid red;">打开小程序</div>
          </script>
      </wx-open-launch-weapp>
  // 3、要在此页面初始化时，或者点击按钮前使用wx.config
  import wx from 'weixin-js-sdk'
  
  methods: {
      onError () {
          console.log('onError')
      },
      onLaunch() {
          console.log('onLaunch')
      },
      onReady() {
          console.log('onReady')
      },
      getAppConfig(){
          // 通过后台接口调用返回wx.config的一些参数
          getAppConfig({
              url: location.href.split('#')[0]
          }).then(res => {
              let jsSdk= res.data['js-sdk']
              wx.config({
                  debug: false,
                  appId: res.data.appid, // 必填，公众号的唯一标识
                  timestamp: jsSdk.timestamp, // 必填，生成签名的时间戳
                  nonceStr: jsSdk.noncestr, // 必填，生成签名的随机串
                  signature: jsSdk.signature, // 必填，签名
                  jsApiList: [
  
                  ], // 必填，需要使用的JS接口列表
                  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
              });
          })
      },
  },
  // vue页面初始化时调用wx.config
  created() {
      this.getAppConfig()
  }

• B、小程序中的webview中的H5页面返回到小程序，注意返回的路径

      jumpMini() {
          console.log('222','公众号页面')
          wx.miniProgram.redirectTo({url: '../mine/index',
              success(res){
              console.log(res, 'success')
              },
              fail(res) {
              console.log(res, 'fail')
              }
          })
          // 同时可通过postMessage回传数据
          wx.miniProgram.postMessage({ data: '获取成功' })
      },
  
      // 小程序的index.vue页面。通过事件接收数据
      <web-view @message="handleGetMessage" :src="state.url"></web-view>
  
      const handleGetMessage = (e) => {
          console.log(e, '公众号传递的数据')
      }

• C、微信小程序中拉取手机号 Taro3+Vue3+nutui，注意不能使用nutui的 按钮，只能使用原生button

  // 1、页面按钮
    <button
      type="primary"
      @click="clickPhoneNumber"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
      >获取手机号</button
  >    
  // 定义事件
  const clickPhoneNumber = () => {
      console.log('clickPhoneNumber')
  }
  const getPhoneNumber = (e) => {
      console.log('ee', 'bb')
      console.log(e.detail.errMsg)
      console.log(e.detail.iv)
      console.log(e.detail.encryptedData)
  }

• D、小程序中的路由跳转

      // 跳转后左上角会有一个返回主页的按钮，
      wx.redirectTo
      Taro.redirectTo
  
      // 跳转后左上角会有一个返回上一页的按钮
      wx.navigateTo
      Taro.navigateTo
  
      // 返回上一页 -2就是之前的上上一页
      wx.navigateTo(-1)
      Taro.navigateBack(-1)

• E、微信小程序全局配置和页面配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

  • 导航栏目属性配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
  • web-view页面

• F、微信小程序首页直接可嵌入web-view承载一个url地址

  • https://segmentfault.com/a/1190000039093571?utm_source=sf-similar-article
  • https://blog.csdn.net/u010059669/article/details/108317593
  • 只不过要在微信小程序后台进行配置url地址
  • 同时web-view是铺满整个手机页面
  • https://blog.csdn.net/huige232508/article/details/107712230
  • https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
  • tip：网页内 iframe 的域名也需要配置到域名白名单。
  • tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
  • tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
  • tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。 --- 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
  • tip：在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。
  • tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。

• G、web-view中通过监听popstate进行返回控制

     const goBack = () => {
          // this.$router.push('/')
          wx.miniProgram.navigateBack({})//返回
      },
      onMounted(()=> {
          // 物理返回监听 移动端
          if (window.history && window.history.pushState) {
              // 往历史记录里面添加一条新的当前页面的url
              history.pushState(null, null, document.URL);
              // 给 popstate 绑定一个方法 监听页面刷新
              window.addEventListener('popstate', goBack, false);//false阻止默认事件
          }
      })
      destroyed(){
          window.removeEventListener('popstate', goBack, false);//false阻止默认事件
      },

• G、import简易路径设置，在confg/index.js中配置alias,同时在tsconfig.json中配置paths

      // index.js
      const path = require('path')
      alias: {
          '@utils': path.resolve(__dirname, '..', 'src/utils'),
          '@store': path.resolve(__dirname, '..', 'src/store')
      },
  
      // tsconfig.json
      "paths": {
          "@utils/*": [
              "src/utils/*"
          ],
          "@components/*": [
              "src/components/*"
          ]    
      },
      // 然后便可以在页面使用
      import useRouter from '@utils/router'
      const router = useRouter()
      console.log(router)

• H、 taro+vue3中使用深度选择器,直接使用即可不用deep

  • vue3中的深度选择器 https://v3.cn.vuejs.org/api/sfc-style.html#style-scoped

      <style lang="scss">
          .nut-cell {
              margin: 1rpx 0;
          }
      </style>

• I、echarts在微信小程序中的使用

  • 在线定制如何选 https://echarts.apache.org/zh/builder.html
  • https://github.com/ecomfe/echarts-for-weixin
  • https://echarts.apache.org/zh/tutorial.html#在微信小程序中使用 ECharts
  • addEventListener事件未定义 https://github.com/NervJS/taro/issues/9986
  • https://juejin.cn/post/7035105329956257806#heading-17 常见问题整理

• J、小程序分包加载，以及dev包过大无法预览可在config/dev.js中

  • https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

• K、 开发环境编译和生产环境编译

  • https://docs.taro.zone/docs/compile-optimized

• L、echarts.js被打包到common.js导致打包文件超过2M的问题

  • https://blog.csdn.net/ForeverCjl/article/details/109536031
  • https://www.jianshu.com/p/15bdbb3c0624
  • https://developers.weixin.qq.com/community/develop/article/doc/000844afee44907ef90c2cfa251c13
  • https://developers.weixin.qq.com/community/develop/article/doc/000c4abfe5c4e073319a5a0a557013

• M、 生命周期

  • https://www.cnblogs.com/piaobodewu/p/10125415.html
  • https://blog.csdn.net/Gabriel_wei/article/details/115689959

• N、返回页面

  • https://www.cnblogs.com/yiweiyihang/p/7514817.html

• O、232 微信小程序地图服务

  • https://lbs.qq.com/product/miniapp/jssdk/
  • https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch

• P、微信小程序跳转到微信小程序

  • https://www.cnblogs.com/strong514/p/12470365.html

• Q、微信小程序登录过程 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

  • 登录接口 https://taro-docs.jd.com/taro/docs/apis/open-api/login/login

• 2、三个环境如何切换

  • https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html
  • https://taro-docs.jd.com/taro/docs/apis/open-api/account/getAccountInfoSync 根据返回的三个值去判断接口地址 develop 开发版 trial 体验版 release 正式版

• 3、本地缓存的设置, 处理web-view中H5页面是否可以读取

  • https://zhuanlan.zhihu.com/p/359007292

• 4、可以发送请求调用业务接口(ok)

• 5、跳转到其他微信小程序

• 6、小程序中跳转到其他H5页面，其他h5页面再返回到微信小程序

• 7、获取微信手机号

  • https://www.cnblogs.com/dreamstartplace/p/10517356.html

• 8、 Taro3.3+ 支持Html标签https://docs.taro.zone/docs/use-h5

• 9、小程序通过接口生成二维码

  • https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
  • https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html

• 10、小程序订阅消息（一次性订阅消息和长期订阅消息，长期仅面向特定行业 政务 金融 教育 交通 医疗等）

  • https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html

• 11、微信小程序云开发

  • https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

• 12、 https://github.com/Yill625/taro3-vue3-template

• 13、微信小程序web-view

  • https://www.jianshu.com/p/197bb7e9f7ca
  • https://zhuanlan.zhihu.com/p/40823432

• 14、 首页左侧返回按钮

  • https://developers.weixin.qq.com/community/develop/doc/000406fe6f41381173397478e5b809?highLine=%25E5%25B0%258F%25E7%25A8%258B%25E5%25BA%258F%25E9%25A6%2596%25E9%25A1%25B5%2520%25E5%25B7%25A6%25E4%25BE%25A7%25E8%25BF%2594%25E5%259B%259E%25E7%25AE%25AD%25E5%25A4%25B4

• 15、web-view中的操作如何返回到小程序

  • https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html?search-key=web_view
  • https://developers.weixin.qq.com/community/develop/article/doc/000a0ce2858618976b0a2df3b5bc13

• 16、判断当前环境是小程序还是微信 https://www.cnblogs.com/daipianpian/p/10288675.html

      wx.miniProgram.getEnv((res)=>{
         if (res.miniprogram) {
             alert("在小程序里");
         } else {
             alert("不在小程序里");
         }
      })

微信小程序开发

• 2022-03-05

  • taro 移除编译css警告 Enable to remove warnings about conflicting order

  config/index.js中添加如下配置
      mini: {
          miniCssExtractPluginOption: {  // 设置忽略顺序，移除警告 https://github.com/webpack-contrib/mini-css-extract-plugin
          ignoreOrder: true
      },

  • taro相关升级到3.4.2

        https://docs.taro.zone/docs/next/composition-api
        在3.4中内置了Composition API， 内置的相当于时微信小程序生命周期中的API
        import { useDidShow } from '@tarojs/taro'

• 0、taro微信小程序

      // 1、通过npm安装脚手架
      npm install -g @tarojs/cli
      // 2、查看版本信息
      npm info @tarojs/cli
      // 3、

• A、公众号H5页面中打开小程序（开放标签）

  参考官网链接 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
  // 1、现在main.js中注册要使用的微信组件
  Vue.config.ignoredElements = ['wx-open-launch-weapp']
  // 2、在页面中添加按钮，要点击的操作，其中username为小程序的原始ID，后面path可以指定跳转页面
  
      <wx-open-launch-weapp
          id="launch-weapp1"
          username="gh_b556d947231f"
          path=""
          @launch="onLaunch"
          @error="onError"
          @ready="onReady"
          >
          <script type="text/wxtag-template">
          <div style="font-size: 14px;margin-top: 10px;text-align: center;border: 10px solid red;">打开小程序</div>
          </script>
      </wx-open-launch-weapp>
  // 3、要在此页面初始化时，或者点击按钮前使用wx.config
  import wx from 'weixin-js-sdk'
  
  methods: {
      onError () {
          console.log('onError')
      },
      onLaunch() {
          console.log('onLaunch')
      },
      onReady() {
          console.log('onReady')
      },
      getAppConfig(){
          // 通过后台接口调用返回wx.config的一些参数
          getAppConfig({
              url: location.href.split('#')[0]
          }).then(res => {
              let jsSdk= res.data['js-sdk']
              wx.config({
                  debug: false,
                  appId: res.data.appid, // 必填，公众号的唯一标识
                  timestamp: jsSdk.timestamp, // 必填，生成签名的时间戳
                  nonceStr: jsSdk.noncestr, // 必填，生成签名的随机串
                  signature: jsSdk.signature, // 必填，签名
                  jsApiList: [
  
                  ], // 必填，需要使用的JS接口列表
                  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
              });
          })
      },
  },
  // vue页面初始化时调用wx.config
  created() {
      this.getAppConfig()
  }

• B、小程序中的webview中的H5页面返回到小程序，注意返回的路径

      jumpMini() {
          console.log('222','公众号页面')
          wx.miniProgram.redirectTo({url: '../mine/index',
              success(res){
              console.log(res, 'success')
              },
              fail(res) {
              console.log(res, 'fail')
              }
          })
          // 同时可通过postMessage回传数据
          wx.miniProgram.postMessage({ data: '获取成功' })
      },
  
      // 小程序的index.vue页面。通过事件接收数据
      <web-view @message="handleGetMessage" :src="state.url"></web-view>
  
      const handleGetMessage = (e) => {
          console.log(e, '公众号传递的数据')
      }

• C、微信小程序中拉取手机号 Taro3+Vue3+nutui，注意不能使用nutui的 按钮，只能使用原生button

  // 1、页面按钮
    <button
      type="primary"
      @click="clickPhoneNumber"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
      >获取手机号</button
  >    
  // 定义事件
  const clickPhoneNumber = () => {
      console.log('clickPhoneNumber')
  }
  const getPhoneNumber = (e) => {
      console.log('ee', 'bb')
      console.log(e.detail.errMsg)
      console.log(e.detail.iv)
      console.log(e.detail.encryptedData)
  }

• D、小程序中的路由跳转

      // 跳转后左上角会有一个返回主页的按钮，
      wx.redirectTo
      Taro.redirectTo
  
      // 跳转后左上角会有一个返回上一页的按钮
      wx.navigateTo
      Taro.navigateTo
  
      // 返回上一页 -2就是之前的上上一页
      wx.navigateTo(-1)
      Taro.navigateBack(-1)

• E、微信小程序全局配置和页面配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

  • 导航栏目属性配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
  • web-view页面

• F、微信小程序首页直接可嵌入web-view承载一个url地址

  • https://segmentfault.com/a/1190000039093571?utm_source=sf-similar-article
  • https://blog.csdn.net/u010059669/article/details/108317593
  • 只不过要在微信小程序后台进行配置url地址
  • 同时web-view是铺满整个手机页面
  • https://blog.csdn.net/huige232508/article/details/107712230
  • https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
  • tip：网页内 iframe 的域名也需要配置到域名白名单。
  • tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。
  • tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
  • tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。 --- 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
  • tip：在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。
  • tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。

• G、web-view中通过监听popstate进行返回控制

     const goBack = () => {
          // this.$router.push('/')
          wx.miniProgram.navigateBack({})//返回
      },
      onMounted(()=> {
          // 物理返回监听 移动端
          if (window.history && window.history.pushState) {
              // 往历史记录里面添加一条新的当前页面的url
              history.pushState(null, null, document.URL);
              // 给 popstate 绑定一个方法 监听页面刷新
              window.addEventListener('popstate', goBack, false);//false阻止默认事件
          }
      })
      destroyed(){
          window.removeEventListener('popstate', goBack, false);//false阻止默认事件
      },

• G、import简易路径设置，在confg/index.js中配置alias,同时在tsconfig.json中配置paths

      // index.js
      const path = require('path')
      alias: {
          '@utils': path.resolve(__dirname, '..', 'src/utils'),
          '@store': path.resolve(__dirname, '..', 'src/store')
      },
  
      // tsconfig.json
      "paths": {
          "@utils/*": [
              "src/utils/*"
          ],
          "@components/*": [
              "src/components/*"
          ]    
      },
      // 然后便可以在页面使用
      import useRouter from '@utils/router'
      const router = useRouter()
      console.log(router)

• H、 taro+vue3中使用深度选择器,直接使用即可不用deep

  • vue3中的深度选择器 https://v3.cn.vuejs.org/api/sfc-style.html#style-scoped

      <style lang="scss">
          .nut-cell {
              margin: 1rpx 0;
          }
      </style>

• I、echarts在微信小程序中的使用

  • 在线定制如何选 https://echarts.apache.org/zh/builder.html
  • https://github.com/ecomfe/echarts-for-weixin
  • https://echarts.apache.org/zh/tutorial.html#在微信小程序中使用 ECharts
  • addEventListener事件未定义 https://github.com/NervJS/taro/issues/9986
  • https://juejin.cn/post/7035105329956257806#heading-17 常见问题整理

• J、小程序分包加载，以及dev包过大无法预览可在config/dev.js中

  • https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

• K、 开发环境编译和生产环境编译

  • https://docs.taro.zone/docs/compile-optimized

• L、echarts.js被打包到common.js导致打包文件超过2M的问题

  • https://blog.csdn.net/ForeverCjl/article/details/109536031
  • https://www.jianshu.com/p/15bdbb3c0624
  • https://developers.weixin.qq.com/community/develop/article/doc/000844afee44907ef90c2cfa251c13
  • https://developers.weixin.qq.com/community/develop/article/doc/000c4abfe5c4e073319a5a0a557013

• M、 生命周期

  • https://www.cnblogs.com/piaobodewu/p/10125415.html
  • https://blog.csdn.net/Gabriel_wei/article/details/115689959

• N、返回页面

  • https://www.cnblogs.com/yiweiyihang/p/7514817.html

• O、232 微信小程序地图服务

  • https://lbs.qq.com/product/miniapp/jssdk/
  • https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch

• P、微信小程序跳转到微信小程序

  • https://www.cnblogs.com/strong514/p/12470365.html

• Q、微信小程序登录过程 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

  • 登录接口 https://taro-docs.jd.com/taro/docs/apis/open-api/login/login

• 2、三个环境如何切换

  • https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html
  • https://taro-docs.jd.com/taro/docs/apis/open-api/account/getAccountInfoSync 根据返回的三个值去判断接口地址 develop 开发版 trial 体验版 release 正式版

• 3、本地缓存的设置, 处理web-view中H5页面是否可以读取

  • https://zhuanlan.zhihu.com/p/359007292

• 4、可以发送请求调用业务接口(ok)

• 5、跳转到其他微信小程序

• 6、小程序中跳转到其他H5页面，其他h5页面再返回到微信小程序

• 7、获取微信手机号

  • https://www.cnblogs.com/dreamstartplace/p/10517356.html

• 8、 Taro3.3+ 支持Html标签https://docs.taro.zone/docs/use-h5

• 9、小程序通过接口生成二维码

  • https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
  • https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html

• 10、小程序订阅消息（一次性订阅消息和长期订阅消息，长期仅面向特定行业 政务 金融 教育 交通 医疗等）

  • https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html

• 11、微信小程序云开发

  • https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

• 12、 https://github.com/Yill625/taro3-vue3-template

• 13、微信小程序web-view

  • https://www.jianshu.com/p/197bb7e9f7ca
  • https://zhuanlan.zhihu.com/p/40823432

• 14、 首页左侧返回按钮

  • https://developers.weixin.qq.com/community/develop/doc/000406fe6f41381173397478e5b809?highLine=%25E5%25B0%258F%25E7%25A8%258B%25E5%25BA%258F%25E9%25A6%2596%25E9%25A1%25B5%2520%25E5%25B7%25A6%25E4%25BE%25A7%25E8%25BF%2594%25E5%259B%259E%25E7%25AE%25AD%25E5%25A4%25B4

• 15、web-view中的操作如何返回到小程序

  • https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html?search-key=web_view
  • https://developers.weixin.qq.com/community/develop/article/doc/000a0ce2858618976b0a2df3b5bc13