浅谈微信小程序开发

一、文件目录结构与全局文件

1、小程序文件最基本的目录如下图:

• app.* 这一类与小程序配置相关。包括小程序的名称,页面的新建,全局数据的设置等都在这几个文件中。

app.json: 该文件使用JSON格式编写,控制小程序页面的创建(“pages”:{})、底部目录的配置(“tabBar”:{})、整体色调的控制(“window”:{})、超时时间的配置等(“networkTimeout”:{})

app.wxss: 该文件用于编写小程序整体的一些css样式,以后用到的模版的样式可以放置在该文件中。

app.js: 该文件为最先调用到的文件,你可以把它想象成是小程序中隐藏的第一个页面,可以在该文件中定义全局变量,在其它的页面中通过getApp()的方式来调用其中的全局变量。

• pages文件夹为存放小程序页面的文件夹。

• index文件夹内容为一个小程序页面需要的几个文件。

index.wxml: 内部为html代码,部分html元素微信对其进行了封装,有新的用法,具体的用法后续将逐一举例说明。

index.js: 内部为js代码,值得一提的是微信暂不支持jquery操作,同时使用的是数据绑定的方式来渲染页面。

index.wxss: 内部为css代码,与传统css没有太大差别。

index.json: 配置一个页面的相关内容,例如页面的名称。

以上就是一个最基本的小程序需要的一些文件,其中index.json文件你可以选择不创建,因为该文件中的json配置你都可以在index.js中通过自带的方法来调用。

2、全局文件的使用。

全局配置文件(设置一些全局参数,或者获取一些全局都可以用到的数据)

      在上面我们有说到,在app.js文件中定义的一些参数是可以在任意的页面中通过getApp()的方式来获取到,所以可以在该文件中设置一些多次用到的数据。例如获取手机屏幕相关的信息。

      app.jsonLaunch方法中调用如下图的方法,并把数据保存在取名为systemInfo的变量中,因为app.js是最先调用到的,所以我们可以在任意的页面中使用到systemInfo这个变量,这是一个object类型的变量。

自定义帮助函数

      我们可以把一些经常使用到的帮助函数提出来单独成一个js文件,如何可以使得能在全局使用这个帮助函数,有两个方法:

      第一、在使用到的页面通过require来调用到帮助函数所在的文件。

      第二、在app.js文件中初始化(require)帮助函数,通过getApp调用到app.js文件中帮助函数所对应的变量即可。

二、多环境开发

本地开发环境:供给开发人员本地开发使用,不影响实际的生产环境。

生产环境:给使用者使用时的环境,不能直接修改。

1、配置本地开发环境:

打开微信小程序开发工具,右上角详情,底部勾选不校验安全域名…”即可使用本地的开发环境。

2、生产环境:

建议使用代码管理工具通过脚本自动同步,例如GitHub

远程的环境需要在小程序后台(微信开放平台)配置安全域名地址,这个配置比较简单就不在这里细说了。

三、展示第一个小程序

  1. 新建一个页面(firstpage)

只需要在app.js文件中的page中添加如下图的配置,然后保存,小程序开发工具会自动帮你创建新的页面。

如下图是最新的文件目录:

第一个点击事件:

进入index.js文件,这里有一点要说明一下,index.js中已经 帮你生成了所有的生命周期函数,而且有很详细的说明,可以大概的看一下,关于生命周期,我们在后面会有详细的说明;新建一个函数,取名为showFirstPage(),写上最简单的跳转方法,如下图:

进入index.wxml文件,写上一个最简单的<button>标签,并为其写上绑定事件:bindtap=‘showFirstPage’,绑定的方法为上面我们创建的跳转方法:

保存后小程序开发工具会自动帮你编译文件,然后点击页面的按钮,即可进入我们新建的页面:

至此,我们的小程序新建已经完成。

后续我们将继续深入的进行小程序的编写。

发表评论

电子邮件地址不会被公开。 必填项已用*标注