学习uniapp
为了兼容问题,现在先列出工具的版本
hbuilderX 2.8.3
微信开发者工具 1.03.20
1.学习uniapp首先需要把hbuilderX下载一下
地址:
https://www.dcloud.io/hbuilderx.html
然后点击中间的 download ,选择想要下载的版本,最近一直都在用来生成微信小程序,所以下载的都是标准版的,而且这个也小,今天下载一下app开发板,试下看能不能生成app,大家如果想要开发小程序,其实标准版就已经够了,下载后解压就会看到HBuilderX.exe文件,点开就可以用了
2.安装好后创建项目
点击文件创建,选择创建项目
然后选择uniapp,下面的模板选择项,根据自己的项目选择
之后他就会下载相应的模板,然后创建好之后就成这样了:
3.然后介绍下结构
页面就创建在pages里面
在这里直接右键就可以创建页面了,然后选择相应的less或sass之后就可以创建了,然后我们看下页面里面的pages.json,会看到pages里面多出一个元素,里面有path和style,这个就是小程序里面的app.json里面的page,只是小程序开发者工具里里面每个页面需要配置是在每个页面里面的testpage.json里面的,而这里可以直接在这单个json里面配置
4.然后我们在页面里面随便写点东西准备打包
这样的写法就是vue的写法,所以写的时候基本不用考虑其他的
写完之后,就可以显试运行一下了
5,下载微信开发者工具,配置到hbuilderX中,点击菜单中的运行--》运行到小程序模拟器--》微信开发者工具-[项目名称],点击之后
然后因为是第一次运行,没有配置过小程序开发者工具,里面会弹出弹窗让配置下小程序开发者工具的安装目录,配置好就行,如果没有安装,下面也有地址,点击就可以跳转过去,下载安装就好
6.配置开发者工具
如果需要运行,配置好这个之后还需要配置下开发者工具里面的设置,把服务端口打开,这样hbuilderX才能控制开发者工具
7.完成
然后呢写完页面之后就可以实时的更新小程序代码,然后如果需要弄页面先后顺序,可以和小程序一样,直接把page.json里面的页面顺序改改就行了,想要哪个显示就把哪个放第一个
8.bug
刚刚遇到的问题:
8.1小程序配置好页面写好之后编译一看报错了:
然后
看了下版本,看到他是给我选择的是2.0.4的,然后改到最新的就可以了,然后就正常了
8.2之前就看到过运行时可以把自己想要的页面配置成启动页,但是总是不行,今天突然看到 启动时候的注意事项,里面第一个就是说这个的,说是需要关闭开发者工具之后才能设置成功,然后刚刚试了下,试玩之后确定这个是无法设置的,还是乖乖到page.json里面把顺序改改算了,这样最快,最正确,配置完当场生效