uni-app 开发demo（apk/微信小程序版本等）

uni-app是一款跨多平台的前端应用框架，使用方法与vue类似。入门成本低，效果吸引人，稍微做个简单的demo看看效果。源码地址： github.com/litRonald/u…

1.使用HBilder模板创建 uni-app

点击 工具栏的文件 -> 新建 -> 项目 ;项目名称hello-uni，使用推荐模板uni-ui项目，勾选了vue3 （根据教程使用模板不要使用有默认勾选uniCloud，会报错，需要注册到修改时间浪费挺多的。有兴趣的可以去看看）

浏览器运行：进入hello-uni 项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版(会自动打开浏览器)。

打开路径 pages/index/index.vue，可以看到元素标签是和html的有区别的，上手难度不大（其他vue项目转过来也是需要改这几个标签）

在pages目录右键 新建页面，填写页面名hello（右边自动勾选的是额外一级文件目录，根据需求是否需要），下面的配置是在根目录的pages.json自动添加页面，非常方便（有一说一自动添加进去的格式格格不入，难道是故意的？？页面删除后记得来这里删掉）。打开hello.vue,

<template>
	<view>
		<view @click="sayHello">say</view>
		<view>{{msg}}</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				msg: ''
			}
		},
		methods: {
			sayHello() {
				this.msg = 'HELLO UNI-APP'
			}
		}
	}
</script>

，打开:3001/#/pages/hello/hello 查看效果.

配置功能跟小程序是一样的，不过好像没看到有兼容TS，语法的配置

打包为原生App

在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：

此处使用测试证书，打包时还需要安装插件，还有提示。测试版本所以直接过

打完包路径在unpackagereleaseapk,但是我并未找到 .apk文件，查看安心打包官网后问题1：

问题： 某些用户反馈，windows电脑，控制台提示Android安心打包成功，进入相应目录(unpackage/release/apk)，目录下找不到apk文件

原因：unpackage/release/apk目录，没有写入权限，移动apk文件失败了。

解决方法：

赋予unpackage/release/apk目录写入权限重启电脑试试

重启以后，重新使用云端打包；需要等挺长一段时间，平均打包时间为4分钟。。

接下来用vx传到手机，安装到运行没有太大问题。。

PS：uni-app打包过程中出现了非常多的问题，需要升级HBuilder到最新版本,解析包会失败。命令行功能暂时也好像不能用。总体来说体验还可以。

2.微信小程序

微信小程序需要登录公众号，获取appid,还要安装微信开发者工具（path需要自行设置）。工具栏选择 工具 -> 设置 -> 运行配置 -> 微信开发者工具路径，填写完了以后，继续发布微信小程序。然后：

(如果打包失败了，用 微信开发者工具 打开 设置 -> 安全设置 -> 服务端口打开即可)

虽然上传成功了，但是还有一点瑕疵（本来就没用上这两个文件）。接下来去小程序平台发布即可

需要注意的是申请小程序的账号的appid,跟公众号的appid是不一样的

附上小程序的教程视频