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

日期：2020-11-27 栏目：程序人生浏览：次

这会导致你小程序那边没登录但是webview那边还是登录的状态所以一般都是在跳转页面到小程序那边的时候直接传递一个token过去来解决这个问题

webview页面刷新

场景:

比如你新增了某条数据或者编辑删除了某条数据想让上一个页面刷新的话

只需要在wechat - otherView中将你想要刷新的routerName添加进去即可

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

页面分享

如果你想要你的页面有分享功能那么只需要在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中?webp即可已经安装了对应的插件库

4.尽量全部使用css module而非全局样式

海报图

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