详解微信小程序开发(项目从零开始)

一、序

微信小程序,估计大家都不陌生,现在应用场景特别多。今天就系统的介绍一下小程序。注意,这里只从项目代码上做解析,不涉及小程序如何申请、打包、发布的东西。(这些跟着微信官方文档的流程走就好)。好了废话不多说,看目录。

注: 小程序是一套特殊的东西,融合了原生和端。他是一个不完整的浏览器对象,所以很多 、 的东西无法使用,但是他又通过微信实现了多线程。

二、 目录

1、如何创建一个微信小程序

2、准备工作(让编译器支持小程序,我用的,也不错)

3、基础文件目录详解

4、创建常见的项目级别目录

5、基础语法详解

6、实现页面跳转

7、. 的封装

8、使用 (引入 、等插件)

9、封装微信小程序可复用组件

10、总结

三、如何创建小程序

很简单,首先下载微信者工具,下载稳定版本的就好。 下载 然后,创建小程序,可以参考下述图片:

注意正式的小程序需要审批,拿到正式的,我们测试的或者暂时没有的可点那个测试的,小程序模板选择默认就好。按照这样的流程走完,我们就创建完一个小程序了。

四、支持小程序

创建完小程序之后,我们先不着急。工欲善其事必先利其器,微信者工具有点卡,而且功能少,效率很低。所以我们还是改造自己的编译器,这里只介绍2种方法。一是 ,他有支持小程序的模块,很小巧的一款编译器; 二是 ,我用的他,在这介绍一下配置的方法,其他的大家自行吧。

1、支持和的文件类型,有语法高亮。 打开编译器,依次点击 文件 -- 设置 -- 编辑器 -- 文件类型 , 找到 文件,添加 .; 找到 ,添加 .。就了

2、支持小程序代码提醒。 下载 这个文件,然后,把他放到一个显眼的地方; 然后, 点击 文件 -- 导入设置 ,找到这个下载的文件,点击确定即可。

以上就是支持小程序语法的操作。

五、基础文件目录详解

然后解释一下小程序的目录结构。

..: 小程序的配置文件,包含项目打包配置、上传代码自动压缩等等,是一些、打包之类的配置。

.: 当前项目的配置文件。包括项目的页面引入、导航条颜色、导航条标题 等等,是项目具体到代码上的配置。介绍几个配置:

: 包含的页面。每次新增页面都得在这里引入,否则新页面的配置等无法生效。 注意中页面先写的先渲染,所以数组第一条也就是我们的首页。

: 配置所有页面导航条字体、颜色、背景色等

.: 小程序入口文件。生成小程序实例,({}), 通常在这获取用户信息、授权信息、定义全局变量等。

.: 小程序全局 文件。对整个项目页面生效。通常规定项目的 字体、基础颜色,定义一些公共样式。

: 工具函数目录。通常用来放一些公共的方法。比如封装的请求,一些别的处理数据什么的方法。

: 小程序的页面目录。所有的小程序页面,都写在这里面。

六、完善项目目录

上边大致解释了一下小程序的基础文件,现在按照常见的规范完善一下项目目录,这里面包含一些个人见解,有需要的参考即可。先看一下结果:

现在解释一下这些目录:

: 我们封装的小程序可复用组件。

: 一些项目中的常亮。

: 用到的图片。

: 用到的所有接口目录

大致就新建了这几个,如果有别的需求,根据自己的情况增加。

七、基础语法详解

现在大致解释一下小程序的语法。首先, 创建新页面,默认都创建 . . . . 和我们平时写的代码差不多,都是 ,多了个配置文件

.:常用的属性有2大块, 相关的设置顶部标题的, 引用的组件

.: () 获取小程序实例,拿全局变量等; ({}) 创建页面; 当前页面的变量; 生命周期,页面加载完毕。

.:注意,小程序支持的标签很少,像 是支持的,不支持,一般用代替块级,、 代替行级。

.:大部分选择器不支持,支持的好像才5个,想支持等得自己配置

八、实现页面跳转

和通常的一样,小程序页面跳转页分2中,中的标签,以及的相关的。路由跳转的方法有好几个,这里不一一赘述了,常用的直接跳转

.,重定向 .等等,具体的请看官方文档。这里强调一下路由传参,很简单:

1、少量数据。直接问传参。然后在目标页面的方法中通过参数接收。

2、大量数据。直接塞到全局变量里面。

九、. 的封装

在中新建.,简单封装了一下,一些数据要全局配置的都引进来,然后做了些错误的统一处理,没什么难度,不过要特别注意一下的携带。具体代码如下:

然后我们使用的时候直接使用封装好的方法,这样所有的就封装成一个个函数。我们在页面中直接引入调用即可。

十、使用 (引入 、等插件)

因为小程序使用的是不完整的浏览器对象,所以很多包都是不好使的,比如之类的。所以基本是废了,能用的依赖包很少,具体哪些能用得自己发掘了。这里还是要介绍一下小程序如何使用,毕竟有些包还是要用的。

1、打开 微信者工具 -- 点击 详情 -- 勾选 使用模块

2、打开命令行,进入项目的根目录下, 初始化

3、 。。。安装你需要的依赖

4、打开 微信者工具 -- 点击 工具 -- 点击 构建。 此时小程序会将 _ 文件编译打包,生成新目录 _ ,

5、在需要用到的页面的文件中, = ('') 引入,直接使用即可

6、最后记得忽略文件。新建 . 文件,_ 、 _. 等文件不需要上传,最好只保留小程序的构建包,用什么依赖也是的那个下载。这个到不是必须的

: 特殊注意一下的引入,这个库是纯的,没有文件,所以他没法用引入,而是直接下载文件,我直接丢到根目录下,然后在 . 文件的开头引入

@ '.';,这样使用的

十一、封装微信小程序可复用组件

现在篇幅有点太长了,这个另写一篇,有需要的可以去看。

十二、总结

以上就是我小程序的一些经验和总结,希望能帮到你。另外,整套程序的骨架(业务代码删掉了)我会上传到,下载 有需要的可以去下载,记得点个赞,哈哈。

最后,我会另写一篇博客,写一下 如何封装小程序 组件,并附上 我小程序遇到的坑,以及对应的解决方法。

© 版权声明
THE END
分享