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
的注册
,页面路由
,数据更新
,事件触发
。 可以帮助开发者快速定位一些常见的问题。