微信小程序学习篇（一）

Hi! 最新小程序很"火"，然后我也就紧跟时代步伐。简单的学习了一下。把笔记记下来，以便自己更好的学习和复习。

      言归正传，任何技术学习起来都要先了解一下发展背景：
        一、什么是微信小程序。
    小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
        二、小程序改变了什么

        关于H5和APP之争，有很多因素决定了这几年H5失去了绝大部分的核心产品市场份额。其中有一点是H5并不能一次开发多处使用，而是要面临不同浏览器和APP平台更多兼容性挑战。比如过去微信就不能支持很多的特性，所以才有了“小程序”。
        三、小程序的亮点

这次微信推出的小程序，最大的亮点在于微信提供了丰富的框架组件和API接口供开发者调用，具体包含：界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应等。在这些组件和接口的帮助下，建立在微信上的小程序在运行能力和流畅度上面便可以保持和Native APP一样的体验。

下面开发正式开始。：

1.   先去下载小程序开发工具。

 

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

2、       打开此软件，运行。用自己的微信号登录。如图

3.添加项目。由于暂时无appid。所以点击无appid，然后写上自己的项目名。同理第一个照样用helloworld。然后选择一个目录。如果此目录是空目录，则勾选下面的quick start。帮助我们快速构建项目结构。然后点击添加项目开始了开发之旅。

4.打开页面如图所示。

5.左边栏。

（1）编辑模块可以看到代码目录结构，修改代码之后需要点击编译查看修改后的效果。

（2）调试模块可以看到运行效果。

（3）项目中点击预览，扫码后即可在微信客户端中体验（由于暂时无appid所以暂时没使用。）

6. 目录结构和各个文件的作用、(疑问？我的程序名成了Hello1是因为我有helloworld项目了。所以改成了Hello1.)

框架程序包含一个描述整体程序的 app和多个描述各自页面的 page

一个框架程序主体部分由3个文件组成，必须在项目的根目录，如下。app.js(必填小程序逻辑)     app.json（必填小程序的公共设置）    app.wxss（非必填 小程序的公共样式表）

一个框架页面有4个文件组成，分别是.js .json .wxml .wxss (.js.wxml是必填)（.json .wxss非必填的）页面下的这4个文件的名称保持一致

.js 脚本文件（监听并处理小程序的声明周期函数，声明全局变量。作用：页面逻辑）

.wxml 布局文件（作用：页面结构页面布局）

.json 配置文件（配置小程序由那些页面组成，窗口背景色，导航条样式，默认标题等。作用：页面配置 但文件中不可加注释）

.wxss样式表文件（小程序的样式表文件。可在页面组件的class属性上直接使用app.wxss中声明的样式规则作用：页面样式表）

7.配置

我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab等。

app.json文件配置：

运行效果：

app.json配置下列表

pages 类型Array（数组）。必填项 设置页面路径。（路径+文件名）不需要后缀。框架会自动去寻找.json .js .wxml .wxss四个文件进行整个

例如

{

  "pages":[

    "pages/index/index"

    "pages/logs/logs"

  ]

}

 

Window 类型object 非必填 设置默认页面窗口表现

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String	导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading图的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数。

     

tabBar 类型Object 非必填 设置底部tab的表现

客户端窗口的底部有tab栏可以切换页面，tabBar是一个数组，只能配置最少2个、最多5个 tab，tab按数组的顺序排序

属性说明：

属性	类型	必填	默认值	描述
color	HexColor	是	tab 上的文字默认颜色
selectedColor	HexColor	是	tab 上的文字选中时的颜色
backgroundColor	HexColor	是	tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black/white
list	Array	是	tab 的列表，详见 list 属性说明，最少2个、最多5个 tab

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	是	图片路径，icon 大小限制为40kb
selectedIconPath	String	是	选中时的图片路径，icon 大小限制为40kb

 

NetworkTimeout可以设置各种网络请求的超时时间

属性说明：

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，单位毫秒
connectSocket	Number	否	wx.connectSocket的超时时间，单位毫秒
uploadFile	Number	否	wx.uploadFile的超时时间，单位毫秒
downloadFile	Number	否	wx.downloadFile的超时时间，单位毫秒

 

Debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。