uni-app卖座电影多端开发纪实（六）：多端打包

搬砖的乔布梭
1,156 阅读3分钟

@打包为H5站点

打包站点

  • HBuilder中菜单中依次点击【发行】-【网站-PC Web或手机H5（仅适用于uni-app）】
  • 填写网站标题，点击发行

image.png

  • 控制台会输出类似如下信息

image.png

  • 此时站点需要的文件已经被打包到了unpackage/dist/build/h5目录

image.png

部署站点

  • 复制上一步中生成的h5目录到Nginx的部署目录下，并重命名为自己喜欢的名字

image.png

  • 配置一下nginx.conf，在http节点中新增一个server节点：
# movie-h5
server {
    # 端口可以自定义 但不要使用[0,1024]之间的端口 这是系统预留区间
    listen       7174;
    server_name  localhost;
    root   "D:/phpStudy/WWW/movie-h5";
}
  • 启动Nginx并使用浏览器查看站点，效果如下：

image.png

  • 如果各位看官有公网域名，以相同方式部署到公网即完成上线！

@打包为微信小程序

分包配置

  • 微信小程序【单个代码包的最大体积】不能超过2M，如果因为某些页面引用的静态资源文件较大较多的原因，导致单个代码包体积超过2M时，我们就需要进行页面的分包配置了；

  • 可以将小程序的众多页面分配到不同子包中，每个子包大小均不超过2M，所有子包的总体积加起来不能超过20M；

  • 下图展示了页面分包配置方式：

image.png

  • 在进行页面跳转的时候，也需要注意按具体分包调整页面位置
// 分包之前
// uni.navigateTo({
//    url: "/pages/cities/cities",
// });
		 
// 分包之后
uni.navigateTo({
    url: "/pages/sub/cities/cities",
});
  • 在微信小程序中查看分包大小：

image.png

打包微信小程序

  • HBuilder中菜单中依次点击【发行】-【微信小程序（仅适用于uni-app）】
  • 填写项目信息，主要是AppID，点击发行

image.png

  • HBuilder开始打包，并在控制台输入如下信息

image.png

  • 此时微信小程序已经打包在unpackage/dist/build/mp-weixin目录

image.png

  • 同时HBuilder关联打开了微信开发者工具，加载的正是上述打包完毕后的内容目录

image.png

上传提交审核

  • 在微信小程序中点击上传，后续步骤按操提示进行填写即可，最后点击上传

image.png

  • 打开小程序管理后台的【版本管理】，就能看到刚才上传的内容了

image.png

  • 点击版本号下方的二维码，可以邀请你的朋友们扫码体验小程序效果，最多可以邀请15位体验者，可在【成员管理】中进行设置；

image.png

  • 点击提交审核，并按引导继续填写后续信息，就进入审核环节了，通常24内小时即可完成审核；

image.png

  • 如果审核通过，那么恭喜你！你的小程序就已经上线了！任何人都可以通过搜索小程序名称的方式搜索到你的小程序了！

@打包为安卓APP

如果公司中有专职的安卓/iOS开发程序员，我们可以选择执行本地打包； 本教程不涉及原生App开发相关内容，我们为大家介绍云打包的App生成方式；

打包APK

image.png

  • 点击打包，App开始编译

image.png

  • 随后进入排队等候状态，真正的打包工作将在DCloud的云端执行

image.png

  • 等待一段时间之后，打包完成，生成的APK路径在unpackage/release/apk路径下 image.png

  • 将这个APK文件传输至手机，就能够查看安装和运行效果了！

image.png

image.png

上传APK到应用市场

  • 将上述打包好的APK上传到各大电子市场，用户就可以下载使用了！

@项目源码

本项目源码 watch,follow,fork！！！

祝大家撸码愉快~

avatar
文章
阅读
粉丝