Uni-app跟学笔记（五）：uni-ui组件库的使用、项目打包（小程序、h5、APP）

本博客为 uni-app 此门课的跟学笔记，目的是便于个人复习和对知识快速索引，源码素材可在均可在视频评论区找到

1）uni-ui组件库的使用

• 推荐在新建项目的时候把项目新建成uni-ui项目，这样uni-ui中的所有组件都会被打包到node_modules中，直接引用即可，就不需要在官网中去下载插件了

• 这里模拟做一个商品导航栏，在uni-ui中是uni-goods-nav组件

1. 必要前提工作，从uni_modules中引入uni-goods-nav.vue模块，并且在components注册该组件

<script>
	// 导入，再注册，然后直接uni-goods-nav引用即可
	import uniGoodsNav from '../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
                // 注册该组件
               	components: {
					uniGoodsNav
				},
            }
        }
</script>

uni-ui组件库例程链接：uni-app官网 (dcloud.net.cn)

2. 在官方例程中找到对应的使用方法，添加必要的属性值和方法

3. 完整代码

<template>
	<view class="goods_detail">
		<!-- 基于uni-ui库开发就是简单嗷 -->
		<view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	// 导入，再注册，然后直接uni-goods-nav引用即可
	import uniGoodsNav from '../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				// 商品底部导航栏
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		methods: {
			// 商品导航栏的(客服/店铺/购物车)
			onClick(e) {
				console.log(e); // 打印事件会发现,区分点击事物在于index
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			// 商品导航栏的(加入购物车/立即购买)
			buttonClick(e) {
				console.log(e) // 打印事件会发现,区分加入购物车和立即购买在于index
				this.options[2].info++
			}
		},
		components: {
			uniGoodsNav
		}
	}
</script>

<style lang="scss">

</style>

2）项目打包

在项目开发完成后，我们要对项目进行打包和上传

1：微信小程序打包

• 首先在项目的manifest.json中设置微信小程序AppID

• AppID需要在微信公众平台上申请，首先需要注册一个小程序

• 注册完成后在开发板块拿到自己的AppID复制回项目的manifest.json对应区域

• 将项目在微信开发者工具中打开，直接点击上传即可，注意字体图标是无法被打包上去时，所以在真正开发时字体图标建议换成线上

• 当然，如果小程序要真正上线使用的话，接口地址应该替换为云上服务器的接口地址，这里用本地后端接口地址仅用于演示

• 再于微信开发者平台配置服务器域名即可

• 上传成功后，在微信开发平台的版本管理板块中可以看到自己上传的版本信息，如果要上传使用则点击提交审核
• 注意，如果写的项目只是一个demo而不是一个完整的可运行的项目，建议不要频繁提交审核，因为审核会消耗一定的官方资源，频繁审核导致会造成信用上的问题

2：h5打包

• 相对简单，在manifest.json中设置页面标题和路由模式

• 随后直接发行即可

• 项目会先打包在本地，在该目录cmd下输入指令：npm i g live-server

• 再输入指令npx live-server --port=3000 在端口3000启动项目

3：安卓打包

• 同样在manifest.json中进行配置，基础配置到web配置之前都是App的配置，我们一个一个看

• 基础配置，配置APP的基础描述信息

• App图标配置，图标只能选择png格式，点击自动生成所有图标并替换可以生成各分辨率的图标并且在软件中都采用同一个

• 配置App启动图，如登录微信时月亮小人的背景图

• 用到了什么模块，就勾选什么模块，比如项目中有点击拨打电话自动复制电话号码跳转到通讯录的功能，则勾选通讯录

• 其他几个配置视情况而定

• 配置完成后发行→原生APP云打包

• apk会打包到unpackage的release目录下，找到安装包即可发送到手机安装