小程序 ·

使用uniapp开发小程序经验总结(1)——开发环境及目录介绍

使用背景:

最近公司要上一个小程序,需要在微信、百度端同步上线,来承接两端推广的流量,由于之前都是做微信小程序,对百度小程序不是很熟,所以就想着找一个一套代码,运行到多个平台的框架。无意间在公众号上看到uniapp的介绍,正好符合我的需求,就开发工具而言uni-app 应该是一骑绝尘,它的文档内容最为翔实丰富,还自带了 IDE 图形化开发工具,鼠标点点点就能编译测试发布,其它的框架都是使用 CLI 命令行工具。

安装开发环境:

1.首先需要先下载安装 HBuilderX;

2.下载百度开发者工具微信开发者工具

创建项目:

1.在HBuilderX 点击工具栏里的文件 - >新建 - >项目:
使用uniapp开发小程序经验总结(1)——开发环境及目录介绍 小程序 第1张
2.然后选择uniapp,输入项目名称,可以根据自己需要选择一个模板,也可以去插件市场下载模板进行导入。
使用uniapp开发小程序经验总结(1)——开发环境及目录介绍 小程序 第2张

项目目录:

1. pages 和小程序一样,就是单个页面,每个页面文件有一个vue文件,在他的里面和vue2一样,分为template和css和script。
使用uniapp开发小程序经验总结(1)——开发环境及目录介绍 小程序 第3张
2. components 是uni-app组件目录,可以从插件市场下载相应组件拖入到其中。
使用uniapp开发小程序经验总结(1)——开发环境及目录介绍 小程序 第4张

3. static目录就是放置图片等静态资源的地方,引入方式就是/static/aa.png这种方式。如果图片用做背景,需要将图片转化为Base64代码。在线转换
使用uniapp开发小程序经验总结(1)——开发环境及目录介绍 小程序 第5张
4. main.json里面需要配置小程序的appid。

5. page.json则和小程序中的保持一致

今天就写到这,下篇介绍自定义导航栏。

参与评论