使用@vue/cli生成小程序项目
参考文档:
uni-app官网https://uniapp.dcloud.io/quickstart-cli.html
注意:vue脚手架的版本跟官方保持一致
步骤:
1、安装脚手架(之前已经安装过的,这一步可以忽略,但是要安装vue脚手架4.x的版本)
2、使用命令创建项目
vue create -p dcloudio/uni-preset-vue uni-shop-4
3、在创建的时候,它会提示你选择什么模板,选择默认模板就行,然后按回车
4、如果看到以下的截图,就代表我们生成项目没有问题
问题:因为下载模板的时候,需要去远程仓库上加载,有时候可能会失败,你们多试几次即可
运行项目
1、更改项目src下的manifest.json文件,把appid更改成你自己的
2、在项目根目录执行 npm run dev:mp-weixin 把vue代码编译成微信小程序原生代码(此时是开发阶段,所以运行 dev: 开头的指令,等项目做完了,要打包了,这个时候运行 build: 开头的指令)
3、打开开发者工具去导入,刚刚项目根目录下生成好的小程序原生代码 dist/dev/mp-weixin
注意:导入的时候,千万不要把uni-app项目整个根目录都导入进来,因为它里面包含了vue的代码,小程序开发者工具根本不认识,所以要导入dist/dev/mp-weixin目录的代码,因为它里面才是小程序原生代码。
4、最终的效果如下
注意:如果运行的过程中,发现最终在开发中工具中查看不了效果,那么大家就重新运行下 npm run dev:mp-weixin 同时,把开发者工具重启,然后重新导入试试
分析生成的项目代码
在uniapp中写小程序代码虽说使用vue,但是跟我们之前讲的vue中的用法还是有所差异(但是差异不大),下面就罗列出跟我们在Web平台中使用vue不一样的地方
- template中,我们必须使用uniapp提供的组件或是自定义组件(不能使用div、span),参考文档:组件使用的入门教程 | uni-app官网
https://uniapp.dcloud.io/component/
- script中,生命周期钩子不能再直接使用vue的了,必须使用uniapp提供的,参考文档:页面简介 | uni-app官网
https://uniapp.dcloud.io/tutorial/page.html#lifecycle
uniapp跟原生小程序的区别
- pages.json中配置的写法不一样,这个要参考uniapp的官方文档
- 在调用api的时候,uniapp是使用uni.开头去调用,原生是使用wx.去调用