uniapp:安装使用

113 阅读2分钟

安装下载

  • 下载安装这个包 然后桌面新建一个文件 拖进去HBuilder X里面就会进入uniapp页面,当你关闭这个程序时 会提示你要不要生成一个HBuilder x的快捷方式 生成即可 将之前安装的文件夹放在你电脑c或是d盘就可以了 如想要查询这个文件的位置点击进去在文件资源管理器找到

2 新建一个uniapp页面

image.png

image.png

第三步骤;运行到浏览器中

image.png 第四步:运行到微信小程序

前提:保证小程序已经登录保持打开的一个状态:

可以配置一下小程序的appid 在公众号平台上找到你的appid:

image.png 在manifest.json中配置下appid和各种配置项

image.png

image.png 遇到启动问题

出现报错如下:

image.png  

打开自己的微信小程序 在设置=》安全这里把服务端口打开

随便找个项目打开微信主页面,把服务端口打开,在uniapp中再重启一下微信小程序即可

image.png

image.png  

 

如果遇到需要填写小程序路径的问题 比如:

image.png

 

找到微信小程序图标 :右击选择如下选项:

image.png

 

复制一下位置:

image.png

 

再点击浏览,把地址粘贴再地址栏中点击确定即可,

如果第一次没有打开项目,可以先点击暂停:

image.png  

再重新的启动:如图

image.png

 

如果想修改一点内容,调试一下,可以在如下的文件位置修改:

image.png

  • 页面文件配置说明 ┌─cloudfunctions 云函数目录(阿里云为aliyun,腾讯云为tcb,详见uniCloud)

│─components 符合vue组件规范的uni-app组件目录

│ └─comp-a.vue 可复用的a组件

├─hybrid 存放本地网页的目录,详见

├─platforms 存放各平台专用页面的目录,详见

├─pages 业务页面文件存放的目录

│ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面

├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此

├─wxcomponents 存放小程序组件的目录,详见

├─main.js Vue初始化入口文件

├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期

├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见

└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见