微信小程序初识

---

微信小程序

---

是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序开发文档
微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

---

微信小程序的优势

---

• 不用安装，即开即用，省流量，省安装时间，不占用桌面；
• 体验上虽然没法完全媲美原生APP，但综合考虑还是更优；
• 对于小程序拥有者来说，开发成本更低，
• 放在如何运营好产品，做好内容本身；
• 对于用户来说，相较于各种APP，微信小程序UI和操作流程会更统一。
• 对于小程序拥有者来说，相较于原生APP，推广更容易更简单，更省成本。

---

微信小程序架构app.js, app.json, app.wxss.

---

• app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量.
• app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径,窗口表现,设置网络超时时间,设置多tab等.
• app.wxss 是小程序的公共样式表.(为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。)

配置文件app.json.下面是官方给出的例子.

官方给出了app.json五个配置项列表.(pages(Array), window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean))

pages

它的作用是配置小程序的页面,这个配置项是必填的,它接受一个数组,里面的每一项都是字符串,从上面给出的代码:
“pages”: [
“pages/index/index”,
“pages/logs/index”
]
可以看出,每一项分别对应的都是实现文件的路径以及他的文件名.
注意:这个配置里面的第一行配置是它的初始页面,例如上面代码的初始页面就是index

window

这个配置项是用来设置小程序的状态栏、导航条、标题、窗口背景色。

他有六个属性

• (navigationBarBackgroundColor(HexColor),
• navigationBarTextStyle(String-(black,white)),
• navigationBarTitleText(String),
• backgroundColor(HexColor),
• backgroundTextStyle(String-(dark,light)),
• enablePullDownRefresh(Boolean)),
  我们可以根据自己的需求来进行配置.

代码示例

tabBar

这个配置项是用来配置页面底部的tab栏的,我们可以根据自己的需求来进行配置.

注意: tabBar是一个数组,只能配置最少2个,最多5个,而且tab栏的顺序是按照数组的排序来的.

tabBar有五个属性(color(HexColor), selectedColor(HexColor), backgroundColor(HexColor), borderStyle(String), list(Array) ).

简单说一下对这五个属性的理解

• color 设置tab上的文字默认颜色
• selectedColor 设置tab上的文字选中的颜色
• backgroundColor 设置tab的背景颜色
• borderStyle 设置边框的颜色,现在仅支持(black和white)

下面是官方给出的效果图：

networkTimeout

它是用来设置各种网络请求的超时时间的,单位是毫秒,官方给出了四个属性(request, connectSocket, uploadFile, downloadFile)这四个属性分别定义的是wx.request, wx.connectSocket, wx.uploadFile, downloadFile 这四个API的超时时间.

debug

如果在app.json将debug配置为true,那么在开发者工具的控制台面板中可以输出详细的调试信息.