如何搭建一个uni-app项目并运行
前言:因项目需求,需要开发移动端项目,其中包含微信小程序和APP。而前端人员有限,所以需要一个人开发移动端,为了更好的提供用户体验,且有vue和微信小程序开发经验,所以准备上手用uni-app,咨询了小伙伴们,听说上手很快,而之前也只是了解阶段,所以,这次准备用这个项目来试试。前期准备工作:1.下载HBuildX HBuildX下载地址微信开发者工具 微信开发者工具下载地址...
前言:
因项目需求,需要开发移动端项目,其中包含微信小程序和APP。而前端人员有限,所以需要一个人开发移动端,为了更好的提供用户体验,且有vue和微信小程序开发经验,所以准备上手用uni-app,咨询了小伙伴们,听说上手很快,而之前也只是了解阶段,所以,这次准备用这个项目来试试。
前期准备工作:
1.下载HBuildX HBuildX下载地址
微信开发者工具 微信开发者工具下载地址
2.安装IDE,并且IDE的安装不能放在如Program Files (x86)中带有特殊符号的目录下
3.安装微信开发者工具,先授权登录,然后打开设置,进入安全设置,开启服务端口。如下图所示
正式开工,创建uni-app项目:
1.打开IDE,点击文件---》新建---》项目---》uni-app---》填写项目名称、存放路径---》默认模板---》创建
2.创建好的项目路径如下图,主要的业务界面放在pages里
manifest.json是用来配置小程序appid,AppSDK等的文件
3.在pages中的index.vue文件中写入如下代码,则可在小程序和app端分别展示不同的数据
4.点击导航栏的运行,或者ctrl+r打开运行,选择微信开发者工具,运行小程序,下图是运行界面
点击运行---》运行到手机或模拟器,下图是运行界面
以上证明代码可以正常执行,并且能个实现小程序和APP展示不同的数据
5.发行
A.打包App,选择发行---》App云打包---》选择DCloud证书(或者选择自有证书,输入相应数据)
B.微信小程序,打开manifest.json文件---》选择微信小程序配置---》输入微信小程序AppID---》点击控制台右上角重新运行按钮---》然后就可以在微信开发者工具上面进行小程序的预览和发布
总结
大概走了一遍流程,uni-app上手蛮快的,操作起来也比较简单,后续可以写几个demo测试一下,或者选用uni-app的模板直接运行浏览查看
更多推荐
所有评论(0)