Uniapp项目开发环境的笔记

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

项目起步

1. 开发环境准备
   1. 微信开发者工具

1. 申请小程序账号

·申请链接：小程序

·小程序后台：https://mp.weixin.qq.com，申请完成后，基本设置开发设置都可在后台管理页面中完成

1. 安装开发环境

开发文档：微信官方文档 | 微信开放文档

请在微信开发文档官方下载相应平台的开发工具

微信开发者工具请下载稳定版，其他版本有可能出现HBuiler X无法启动的情况

1. 请在安全设置中打开服务端口，以便通过HBX调用

1. 1. 安装HBX

1、申请dcloud开发者账号

·DAccount Service

·打包发布应用需要在开发者中心创建应用，每个应用对应一个appid，也可在HBX中生成

2、安装开发环境

3、配置微信开发者工具路径，以调试小程序

4、配置adb路径及AVD端口号，以调试Android 应用常用的有genymotion、网易mumu、夜神等，网易mumu下载地址：http://mumu.163.com/

5、配置adb路径及AVD端口号，以调试Android 应用

不同虚拟器的端口号不同，常用的Genymotion为5555，夜神62001/52001，雷神和腾讯游戏助手也是5555，网易mumu为7555，根据自己安装的模拟器配置相应的端口即可。

对于adb路径，默认安装路径则无需设置，若自定义安装，需要配置目录为模拟器bin目录下的adb_server

1、3创建demo并运行

1. uni-app介绍：https://uniapp.dcloud.net.cn/
2. 创建uni-app空项目并分别运行到浏览器、Android模拟器和微信开发者工具
3. 创建uni-app的hello项目并分别运行到浏览器、Android模拟器和微信开发者工具，以查看官方的组件、接口、模板等示例
4. 项目结构
   • pages文件夹存放页面
   • static文件夹内文件不会进行编译，所以不要放js文件，可放到common中
   • unpackage文件夹存放打包的文件
   • components文件夹存放各种组件
   • App.vue代表应用，包括应用层的生命周期方法，全局样式等
   • pages.json整个应用的页面集合，第一项为启动页，可配置页面路由及样式和标题
   • manifest.json应用配置，包括图标配置、启动界面配置、权限配置及其他开发配置
   • main.js应用入口文件
5. 资源路径
   • 使用@开头的绝对路径及相对路径，会经过base64转换规则校验
   • 静态资源在非h5平台，不转为base64
   • h5平台，只有小于4kb的资源会被转换为base64
   • js可使用@进行绝对路径引用，或者使用相对路径引用，不支持/开头的绝对路径
   • css支持@或者/进行绝对路径引用，或相对路径引用
6. vue和nvue的区别
   • vue是真正跨端通用的，采用webview渲染
   • nvue只针对app，h5和小程序不能用，采用weex渲染，因原生渲染性能更好，可用在某些强调性能的场景
   • 开发时，template和js部分是一样的，但css不一样，nvue只能使用flex布局
7. vue文件结构

8、pages.json页面配置

9、使用console.log在浏览器或微信开发者工具中进行调试

             在生命周期函数中使用clog输出信息，在template中添加基本视图元素，在浏览器或微信开发者工具中运行，使用浏览器的开发人员工具，在不同的调试面板中进行调试：

①【控制台】中查看clog输出的信息

②【元素】中查看视图元素代码

③【网络-fetch】中查看网络请求的相关信息

④【应用程序】中查看应用相关数据，如缓存等

⑤页面上方，可设置设备类型或自定义分辨率