微信小程序webview 脚手架使用详解

  const { viewName } = this.$router.params
  // 强制指定页面刷新
  if ([这里就是你想要刷新的路由名字].indexOf(viewName) !== -1 && this.init) {
   Taro.redirectTo({ url: `../../pages/otherView/index"color: #ff0000">页面分享


如果你想要你的页面有分享功能 那么只需要在webview端发起一个apitool.postMessage即可


如果你想要控制分享的标题与内容的话


可以按照这种格式进行发送




apitool.postMessage({type:'share',data:{
  title:'分享标题',
  path:'分享路径',
  shareUrl:'分享的图片url'
}})


其他处理


如果你想要让你的应用具备更多的扩展性的话 可以在wechat - otherView - onMessage中增加对应的判断


nodeServer


在react-ssr-h5根目录下面有个nodeServer的文件


这个文件是一个js授权的本地服务器版本 如果你想用jssdk的一些功能来进行授权的话可以在项目中执行npm run wechat来开启这个服务


appid跟secret都被我删除了 你需要自己手动替换一下


页面授权在_app.js文件中


postcss.config说明


react-ssr-h5使用的是vw vh为单位 所以设计搞那边如果宽高不是750 * 1334的话 需要postcss.config.js中对对应的修改




    "postcss-px-to-viewport": {
      viewportWidth: 750,   // (Number) The width of the viewport.
      viewportHeight: 1334,  // (Number) The height of the viewport.
      unitPrecision: 3,    // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw',   // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1,    // (Number) Set the minimum pixel value to replace.
      mediaQuery: false    // (Boolean) Allow px to be converted in media queries.
    },


react-ssr-h5提醒


这个项目在启动或者export的时候都做了处理


你只需要在pages里面添加内容即可


不需要在server中再去编写指定的路由 也无需在export的时候编写路由


你对pages做的改动都会实时刷新


服务端渲染建议


1.不要在网页中引入antd库 尤其不要使用带有icon的组件 如input

引入这个将会导致你的体积直接增加140k 因为antd的图标是全量引入的


2.使用swiper之类的库 可以采用cdn的方式引入而不是npm 这样可以使你的打包体积变得更小


3.建议使用webp而非png只需要在url中"color: #ff0000">海报图


小程序海报图可以使用Painter生成


链接如下: https://github.com/Kujiale-Mobile/Painter


这是taro引入Painter的demo


https://github.com/Kujiale-Mobile/Taro-Painter-Demo


项目地址


https://github.com/fangkyi03/wechat-webview-template
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。