小程序快应用开发说明

需分别下载:抖音开发工具,微信开发工具,快应用开发工具

一般开发流程

1. 电脑安装nginx

配置nginx文件,将默认打包后的web包地址配置为对应小程序/快应用的路径,这样打包后reload即可直接访问
终端直接执行nginx -s reload

2. 修改项目本地地址

修改项目mini_app_utils文件中 localWebUrl地址前缀为自己电脑网络地址,设置isLocal为true

3. 修改壳工程项目本地地址

在app.js/app.ux文件中的gloabalData的isLocal字段,以及对应的webUrl改为自己电脑本地地址,需与对应的h5同步

4. 小程序开发工具,编译或调试,即可运行项目

关于调试

各个小程序的调试界面都可以看到壳工程的日志,抖音小程序/快应用不支持查看h5内的日志,微信小程序可以支持,但是只能在模拟器上看,并且如果是报错的日志并不会打印出真实的栈帧,而是生成js文件后的具体行数,变量名也被混淆,基本无法找到具体问题。

如果想要开发查看日志,则必须电脑运行浏览器,并且将真实的链接参数赋值给浏览器,一般比较大的需求开发都使用此种模式,尤其是不涉及到壳代码,纯flutter的需求的时候,因为浏览器的环境与小程序的agent不同,在代码的环境判断的时候可能与小程序/快应用有差异,这点需要注意,浏览器的枚举type为none。

  1. 运行项目从浏览器复制到具体的本地url地址
  2. 修改main.dart的replace地址,写上刚才复制的地址
  3. 运行对应的小程序/快应用,从小程序开发工具的调试日志中拿到具体的url拼接参数,复制?后面的内容粘贴到刚刚运行的浏览器中
  4. 重新运行即可正常调试

关键特性说明

小程序:
因为交互功能被限制。交互主要采用hash传参,在url后面通过#拼接参数来实现url刷新,但是url必须是一个固定的地址,后面不能拼接参数,也不能有路由名。
所以小程序内的h5首次进来后需要把url后面拼过来的参数先保存到本地,然后重新reload,变成一个没有参数拼接的纯净的url。
同时也不能存在路由栈,跳转新页面时url后面不会跟具体的pageName,所以物理返回键会直接退出小程序。

快应用:
因为快应用允许交互,所以可以正常交互,可以有路由。

两个utils封装了小程序和快应用相关内容。

坚持原创技术分享,您的支持将鼓励我继续创作!