uniapp是基于vue框架的一个能够跨平台运行的优秀前端框架,兼容性方面uniapp做的很好,但是在开发的时候有很多的坑,特别是习惯了vue开发之后再去使用uniapp会出现一些习惯性的错误。
uniapp在开发环境下可以不使用package.json
package.json文件在vue项目中是在npm init也就是项目初始化的时候创建出来的,在npm install的时候,通过扫描package.json里边的配置来进行依赖安装生成node_modules文件。
但是uniapp项目中,初始化之后的项目是不带package.json的。这个时候我们在开发环境下只需要在终端输入npm install --save xxx就行,但是有些时候会发现这些依赖没有被安装成功,那么这个情况我遇到的就是有些开发人员会把项目文件夹直接放在桌面上也就是C盘下,那么这个时候安装依赖,由于文件夹命名问题就会导致依赖安装不到相应的目录中。
uniapp的运行方式和vue项目是不同的
uniapp项目是可以跨平台运行的,一般我们进行uniapp项目开发使用的IDE是HBuilder,通过HBuilder,我们是可以直接使用工具栏中的运行将项目运行起来,而不再需要使用npm run dev或者npm run serve运行。
另外由于在开发环境下我们不需要对package.json进行配置,所以关于运行的命令和打包的命令我们也就不需要在进行配置。只有当我们准备将项目部署到服务器上的时候,我们可以通过npm init来生成package.json文件然后来实现安装依赖的配置和打包、运行命令的配置。
uniapp项目运行在相应小程序上的时候需要进行相关配置
我们在平时进行微信小程序开发的时候使用uniapp,刚创建的项目直接运行在微信开发者工具上了话会出现一个报错:
关于forceUpdate的报错,那么这个问题就和小程序的配置有关系,和mainfest.json文件的配置是有关系的。解决这个问题我们需要把mainfest.json文件下的微信小程序配置中的AppID配置上,然后重启HBuilder和微信开发者工具,就可以解决这个报错问题。
关于AppID的获取,官网上是有相应的说明的,如果是开发测试状态下了话,可以使用测试公众号的AppID,但是如果到了正式部署的状态,就需要把正式的小程序AppID给再配置上,这点需要注意。
this指向问题
在uniapp中,this的指向和vue中this的指向是不太一样的,比如说在vue的created钩子函数中调用methods中的一个方法,我们直接使用**this.fn()**就可以实现,但是在uniapp中this不能够这样使用。
在uniapp中,我们在methods中的一个方法去调用data中的变量,建议将this节点保存,也就是使用 let that = this。