uniapp 跳转_uniapp从安装到使用

3f56b4087c40f8d828a8b9dda255dea1.png

    学习uniapp

    为了兼容问题,现在先列出工具的版本

hbuilderX              2.8.3

微信开发者工具      1.03.20

    1.学习uniapp首先需要把hbuilderX下载一下

地址:

https://www.dcloud.io/hbuilderx.html

    然后点击中间的 download ,选择想要下载的版本,最近一直都在用来生成微信小程序,所以下载的都是标准版的,而且这个也小,今天下载一下app开发板,试下看能不能生成app,大家如果想要开发小程序,其实标准版就已经够了,下载后解压就会看到HBuilderX.exe文件,点开就可以用了

    2.安装好后创建项目

    点击文件创建,选择创建项目

f57859bd790ecd54f7483283af8d59c0.png

    然后选择uniapp,下面的模板选择项,根据自己的项目选择

    之后他就会下载相应的模板,然后创建好之后就成这样了:

b06bca90c8558cb76600b987d604d199.png

    3.然后介绍下结构

    页面就创建在pages里面

    在这里直接右键就可以创建页面了,然后选择相应的less或sass之后就可以创建了,然后我们看下页面里面的pages.json,会看到pages里面多出一个元素,里面有path和style,这个就是小程序里面的app.json里面的page,只是小程序开发者工具里里面每个页面需要配置是在每个页面里面的testpage.json里面的,而这里可以直接在这单个json里面配置

    4.然后我们在页面里面随便写点东西准备打包

    这样的写法就是vue的写法,所以写的时候基本不用考虑其他的

1917274fc235cdf1ca19f6b1423ec63e.png

    写完之后,就可以显试运行一下了

    5,下载微信开发者工具,配置到hbuilderX中,点击菜单中的运行--》运行到小程序模拟器--》微信开发者工具-[项目名称],点击之后

25c0fc6c03931b7a09f7f76ff31117be.png

    然后因为是第一次运行,没有配置过小程序开发者工具,里面会弹出弹窗让配置下小程序开发者工具的安装目录,配置好就行,如果没有安装,下面也有地址,点击就可以跳转过去,下载安装就好

    6.配置开发者工具

    如果需要运行,配置好这个之后还需要配置下开发者工具里面的设置,把服务端口打开,这样hbuilderX才能控制开发者工具

0835cfe776e0b8e157c21991732b2731.png

    7.完成

    然后呢写完页面之后就可以实时的更新小程序代码,然后如果需要弄页面先后顺序,可以和小程序一样,直接把page.json里面的页面顺序改改就行了,想要哪个显示就把哪个放第一个

    8.bug

    刚刚遇到的问题:

        8.1小程序配置好页面写好之后编译一看报错了:

c2465fd9d00cbe4b5b46a37beb7c0255.png

    然后

    看了下版本,看到他是给我选择的是2.0.4的,然后改到最新的就可以了,然后就正常了

23fb6aeae9e506fa2b788cde7ac5725d.png

        8.2之前就看到过运行时可以把自己想要的页面配置成启动页,但是总是不行,今天突然看到 启动时候的注意事项,里面第一个就是说这个的,说是需要关闭开发者工具之后才能设置成功,然后刚刚试了下,试玩之后确定这个是无法设置的,还是乖乖到page.json里面把顺序改改算了,这样最快,最正确,配置完当场生效

02b42dbe57e0b8aa0eb3c03232d13d51.png

1859d77a785353c81742337e1cdf454a.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值