作者：黄菊华
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
微信小程序商城开发：界面设计实战试读：
前言
第一部分 小程序基础第1章 小程序起步1.1 开发准备1.2 第一个微信小程序1.3 代码构成1.3.1 JSON配置1.3.2 WXML模板1.3.3 WXSS样式1.3.4 .js脚本交互逻辑1.4 小程序的能力1.5 小程序发布准备1.6 小程序上线第2章 小程序基础知识2.1 项目配置文件2.2 全局配置和页面配置2.2.1 全局配置2.2.2 页面配置2.3 WXSS样式语言2.4 逻辑层.js脚本2.4.1 App方法2.4.2 运行机制2.4.3 场景值2.4.4 Page方法2.4.5 路由2.4.6 模块化2.4.7 API2.5 WXML视图层开发2.5.1 数据绑定2.5.2 列表渲染2.5.3 条件渲染2.5.4 模板2.5.5 事件2.5.6 引用
第二部分 小程序样式入门第3章 小程序样式基础3.1 元素选择器3.2 ID选择器3.3 类选择器3.4 样式的几种写法3.4.1 Web中样式的几种写法3.4.2 小程序中样式的几种写法3.5 背景颜色3.6 文本3.6.1 水平对齐（text-align）3.6.2 文本最后行对齐（text-align-last）3.6.3 缩进文本（text-indent）3.6.4 文本装饰（text-decoration）3.6.5 单词间隔（text-justify）3.6.6 文本溢出（text-overflow）3.6.7 文本阴影（text-shadow）3.6.8 字符转换（text-transform）3.6.9 处理空白符（white-space）3.6.10 自动换行（word-break）3.6.11 长词换行（word-wrap）3.6.12 单词间隔（word-spacing）3.6.13 字母间隔（letter-spacing）3.6.14 文本方向（direction）3.7 字体3.7.1 字体大小（font-size）3.7.2 字体风格（font-style）3.7.3 字体变形（font-variant）3.7.4 字体加粗（font-weight）3.8 轮廓第4章 框模型4.1 框模型概述4.2 内边距4.3 边框4.3.1 基础语法4.3.2 小程序应用4.4 外边距4.5 外边距合并第5章 定位5.1 相对定位5.2 绝对定位5.3 浮动第6章 选择器6.1 选择器的分组6.2 派生选择器6.3 属性选择器6.4 后代选择器6.5 子元素选择器6.6 相邻兄弟选择器
第三部分 前端开发入门第7章 弹性布局7.1 弹性布局基本概念7.2 flex容器的属性7.2.1 项目排列方向（flex-direction）7.2.2 项目换行（flex-wrap）7.2.3 flex-flow属性7.2.4 水平对齐（justify-content）7.2.5 垂直对齐（align-items）7.2.6 各行对齐（align-content）7.3 flex项目的属性7.3.1 子元素的排序（order）7.3.2 放大比例（flex-grow）7.3.3 缩小比例（flex-shrink）7.3.4 项目占据的主轴空间（flex-basis）7.3.5 flex综合属性设置7.3.6 子元素的对齐（align-self）7.3.7 对齐和居中（margin）7.4 flex布局样例第8章 JSON数据解析8.1 JSON简介8.2 JSON语法8.2.1 JSON语法规则8.2.2 JSON使用JavaScript语法8.3 JSON对象8.3.1 对象语法8.3.2 访问对象值方式18.3.3 访问对象值方式28.3.4 嵌套JSON对象8.3.5 修改值8.3.6 删除对象属性8.4 JSON数组8.4.1 JSON对象中的数组8.4.2 数组的循环访问8.4.3 嵌套JSON对象中的数组8.4.4 修改数组值8.4.5 删除数组元素8.5 JSON.parse（）8.5.1 浏览器支持8.5.2 语法8.5.3 JSON解析实例8.5.4 从服务端接收JSON数据8.5.5 从服务端接收数组的JSON数据8.6 JSON.stringify（）转字符串8.6.1 JSON.stringify（）语法8.6.2 JavaScript对象转换8.6.3 JavaScript数组转换8.7 eval函数第9章 小程序前端开发基础9.1 常用数据9.1.1 变量9.1.2 对象9.1.3 数组9.2 逻辑语句9.2.1 if语句9.2.2 for语句9.2.3 while语句9.2.4 switch和case语句9.3 其他9.3.1 事件的定义和使用9.3.2 通过url来传递参数
第四部分 实战第10章 常用组件10.1 组件概要10.2 基础组件10.2.1 视图容器（view）10.2.2 可滚动视图区域（scroll-view）10.2.3 滑块视图容器（swiper）10.2.4 图标（icon）10.2.5 文本（text）10.2.6 图片（image）10.3 表单组件10.3.1 按钮（button）10.3.2 多选项目（checkbox）10.3.3 多项选择器（checkbox-group）10.3.4 表单（form）10.3.5 输入框（input）10.3.6 标签（label）10.3.7 滚动选择器（picker）10.3.8 单选项目（radio）10.3.9 单项选择器（radio-group）10.3.10 滑动选择器（slider）10.3.11 开关选择器（switch）10.3.12 多行输入框（textarea）10.4 其他10.4.1 页面链接（navigator）10.4.2 原生组件的使用限制第11章 常用API11.1 网络相关说明11.1.1 网络配置11.1.2 HTTPS网络请求11.2 手机相关的API11.2.1 wx.chooseImage11.2.2 wx.getSystemInfo11.2.3 wx.makePhoneCall11.3 数据缓存API11.3.1 wx.setStorage11.3.2 wx.setStorageSync11.3.3 wx.getStorage11.3.4 wx.getStorageSync11.3.5 wx.getStorageInfo11.3.6 wx.removeStorage11.3.7 wx.clearStorage11.4 交互API11.4.1 wx.showToast11.4.2 wx.hideToast11.4.3 wx.showLoading11.4.4 wx.hideLoading11.4.5 wx.showActionSheet11.4.6 wx.showModal11.5 路由API11.5.1 wx.navigateTo11.5.2 wx.navigateBack11.5.3 wx.redirectTo11.5.4 wx.reLaunch11.5.5 wx.switchTab第12章 首页12.1 商城框架12.2 顶部广告图片12.3 顶部轮播图片12.4 快捷菜单12.5 最新通知12.6 最新产品12.7 精品推荐12.8 销售排行第13章 分类和产品13.1 左右布局框架13.1.1 布局分析13.1.2 功能实现13.2 产品列表13.2.1 顶部查询布局13.2.2 条件筛选布局13.2.3 产品列表布局13.3 产品页面顶部切换功能13.4 产品页面底部功能13.5 产品简介布局13.6 产品详情页布局13.7 产品评价页布局第14章 购物车和下单14.1 购物车首页底部菜单14.2 购物车产品列表14.3 下单页面底部菜单14.4 下单页面收货地址14.5 下单页面的产品列表和留言第15章 会员界面15.1 会员首页15.2 我的订单15.3 收货地址列表15.4 收货地址修改和新增15.5 我的收藏15.6 常见问题列表15.7 联系客服第16章 公用功能16.1 留言反馈16.2 活动信息列表16.3 帮助中心列表16.4 关于我们列表16.5 信息详情（简易版）16.6 信息详情（带底部评论）第17章 杂项知识17.1 WeUI17.1.1 实战项目框架的制作17.1.2 栏目首页17.1.3 article文章17.1.4 badge徽章17.2 WxParse解析富文本（html）代码前言
微信小程序自2017年1月9日正式上线后，就引发了一系列的热烈讨论。小程序为开发者提供了一种新的能力，使开发者可以快速地开发一个小程序商城。用户可便捷地获取小程序服务，无须安装或下载；小程序具有更丰富的功能和出色的使用体验；小程序具有封装一系列接口的能力，有助于快速开发和迭代，同时在安卓和苹果手机上都通用。
本书是讲解微信小程序前端界面设计的入门书籍，有详细的理论知识、布局分析、逻辑分析，还有丰富的实战案例以及详细的代码解说，具有很强的实用性。微信小程序使用大量的组件，官方提供了详细的文档；本书在此基础上，结合作者的理解，配备了更详细的实战案例，同时为代码添加了详细的注释，读者拷贝代码到开发工具即可看到效果，这样读者可以在最快的时间内掌握基础知识，快速进入实战开发。
微信小程序的前端样式开发基于传统的CSS，所以从前端UI的实现角度来讲，读者只需要熟悉CSS就能轻松上手微信小程序的界面设计；当然，有些CSS语法微信小程序是不支持的。
微信小程序开发框架的逻辑层使用JavaScript引擎为小程序开发者提供运行环境，并提供小程序的特有功能。在JavaScript的基础上还增加了一些功能，以方便小程序的开发。本书详细讲解了前端逻辑层用到的JavaScript基础语法。
如果读者没有小程序基础，建议先将第1和第2章的基础知识通读一遍。
第3～6章为小程序样式入门，主要讲解小程序页面样式布局，这都是前端UI设计所要用到的知识，建议读者仔细阅读，动手操作。掌握了基础知识，后面学习小程序商城界面设计才能得心应手。
第7～9章为前端开发入门，主要讲解小程序中前端JavaScript基础知识和实战应用，有别于传统的JavaScript代码，建议读者详细阅读，动手练习。
第10～17章为实战部分。其中，第10和第11章讲解小程序开发所需的常用组件和API。第12～16章介绍微信小程序商城界面的制作，包括布局分析和逻辑分析，读者按照书中的步骤练习，便可快速掌握。第17章讲解官方WeUI框架如何使用，以及如何引用第三方插件。
本书示例代码力求完整，但由于篇幅有限，有些代码没有写入书里。需要完整代码的读者请访问以下网址：
http://www.4317.org/book
http://www.yaoyiwangluo.com/book第一部分 小程序基础
·第1章 小程序起步
·第2章 小程序基础知识第1章 小程序起步
工欲善其事，必先利其器。本章主要讲解微信小程序开发需要的一些基本知识，为后面的小程序开发做好准备。本章主要内容有：开发准备工作，写出第一个微信小程序，小程序的代码构成和能力，如何准备并发布小程序等。1.1 开发准备
在开发微信小程序前，大家有必要了解一下需要做的准备工作。提示
官方参考地址为https://developers.weixin.qq.com/miniprogram/dev/
1.接入流程
大致接入流程如下：
1）注册。在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。
2）小程序信息完善。填写小程序基本信息，包括名称、头像、介绍及服务范围等。
3）开发小程序。完成小程序开发者绑定和开发信息配置后，开发者可下载开发者工具，参考开发文档进行小程序的开发和调试。
4）提交审核和发布。完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。
2.申请账号
注册地址为https://mp.weixin.qq.com/wxopen/waregister?action=step1
根据指引填写信息并提交相应的资料，之后便拥有了自己的小程序帐号。页面打开效果如图1-1所示。图1-1 注册页面
在这个小程序管理平台，你可以管理你的小程序权限，查看数据报表，发布小程序等。
3.获取微信小程序AppID
登录网址：https://mp.weixin.qq.com。我们可以在菜单“设置”→“开发设置”中看到小程序的AppID，如图1-2所示。
小程序的AppID相当于小程序平台的一个身份证，后续你会在很多地方要用到AppID（注意，这里要区别于服务号和订阅号的AppID）。有了小程序帐号之后，我们需要一个工具来开发小程序。
4.安装开发工具
根据自己的操作系统下载对应的安装包来安装开发工具，操作系统如下：
·Windows 64位
·Windows 32位
·Mac OS图1-2 小程序的AppID
准备好你的手机和微信小程序的AppID，打开小程序开发者工具，通过微信扫码登录开发者工具，准备开发你的第一个小程序吧！
为了帮助开发者简单高效地开发和调试微信小程序，微信官方在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式：
·使用公众号网页调试，开发者可以完成微信网页授权和微信JS-SDK。
·使用小程序调试，开发者可以完成小程序的API和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
安装后的微信开发者工具如图1-3所示。提示
Windows仅支持Windows 7及以上版本。
开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18110616
开发者工具介绍：
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html?t=18110616图1-3 微信开发者工具1.2 第一个微信小程序
新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请的小程序的AppID，给你的项目起一个好听的名字，最后，勾选“建立普通快速启动模板”（注意，你要选择一个空的目录才会有这个选项），点击“确定”，就得到了你的第一个微信小程序了。点击顶部菜单预览就可以在微信开发者工具中预览你的第一个小程序，效果如图1-4所示。
点击工具上的“编译”按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击“预览”按钮，通过微信的“扫一扫”在手机上体验你的第一个小程序，效果如图1-5所示。
通过以上步骤，你已经成功创建了第一个微信小程序，并且在微信客户端上体验到它流畅的表现。1.3 代码构成
在上一节中，我们通过开发者工具快速创建了一个“建立普通快速启动模板”项目。你可以留意到这个项目里生成了以下不同类型的文件：图1-4 第一个微信小程序预览
·带.json后缀的是JSON配置文件。
·带.wxml后缀的是WXML模板文件。
·带.wxss后缀的是WXSS样式文件。
·带.js后缀的是JavaScript脚本逻辑文件。
接下来我们分别阐述这4类文件的作用。图1-5 第一个微信小程序手机效果图1.3.1 JSON配置
我们可以看到，在项目的根目录下有一个app.json和project.config.json文件，此外在pages/logs目录下还有一个logs.json文件，我们依次说明它们的用途。
1.app.json（小程序配置）
app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。项目里面的app.json配置内容如下：{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
其中，各配置项的含义如下。
·pages字段：用于描述当前小程序的所有页面路径，目的是让微信客户端知道当前的小程序页面定义在哪个目录下。
·window字段：定义小程序所有页面的顶部背景颜色、文字颜色等。
2.project.config.json（项目配置）
在使用一个工具的时候，开发者通常会根据各自喜好做一些个性化配置，例如界面颜色、编译配置等，如果换了另外一台电脑重新安装工具的时候，还要重新配置。
考虑到这点，小程序开发者工具会在每个项目的根目录下生成一个project.config.json，这样，开发者在工具上做的任何配置都会写入这个文件。当重新安装工具或者更换电脑工作时，你只要载入同一个项目的代码包，开发者工具就会自动帮你恢复到以前开发项目时的个性化配置，包括编辑器的颜色、代码上传时自动压缩等一系列选项。
3.page.json（页面配置）
这里的page指的某个具体的小程序页面，比如a.json、b.json，page代表的a或者b。每个小程序都有一个对应的文件名，后缀为.json的配置文件。比如你的小程序文件名是huang，那么对应肯定有一个huang.json的配置文件。比如logs.json用于表示pages/logs小程序页面相关的配置。
如果你的小程序的风格是蓝色调，那么可以在app.json里声明顶部颜色是蓝色。实际情况可能不是这样，可能小程序里每个页面都用不同的颜色来区分不同功能模块，因此小程序开发者工具提供了page.json，让开发者可以独立定义每个页面的一些属性，例如设置顶部颜色、是否允许下拉刷新等。1.3.2 WXML模板
从事过网页编程的人都知道，网页编程采用的工具是HTML+CSS+JavaScript这样的组合，其中，HTML用来描述当前页面的结构，CSS用来描述页面的样子，JavaScript通常用来处理这个页面和用户的交互逻辑。
同样，在小程序开发中也有类似的组合，其中WXML充当HTML的角色。打开pages/index/index.wxml，你会看到WXML文件，.wxml文件代码示例如下：
和HTML非常相似，WXML由标签、属性等构成。但是它们也有很多不一样的地方，下面我们一一阐述。
1.标签名字稍有不同
写HTML的时候，经常会用到的标签是div、p、span。开发者在写一个页面的时候可以根据这些基础标签组合出不一样的组件，例如日历、弹窗等。既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高开发效率呢？
从上面的例子可以看到，小程序的WXML用的标签是view、button、text等，这些标签是小程序给开发者包装好的基本能力，另外还提供了地图、视频、音频等组件。
2.多了一些类似于wx：if的属性以及{{}}的表达式
在网页的一般开发流程中，我们通常会通过JavaScript操作DOM（对应HTML的描述产生的树），以引起界面的一些变化来响应用户的行为。例如，用户点击某个按钮时，JavaScript会把一些状态记录到JavaScript变量里，同时通过DOM API操控DOM的属性或者行为，进而引起界面的一些变化。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了MVVM开发模式（例如React、Vue等），提倡把渲染和逻辑分离。简单来说，就是不要再让JavaScript直接操控DOM，JavaScript只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系。
小程序的框架也是利用了这个思路。例如，把一个Hello World的字符串显示在界面上。
.wxml文件代码示例如下：
.js文件代码示例如下：this.setData({ msg: "Hello World" })
通过{{}}语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定尚不能完整地描述状态和界面的关系，还需要if/else、for等控制能力，在小程序里，这些控制能力都用wx：开头的属性来表示。1.3.3 WXSS样式
WXSS具有CSS大部分的特性，小程序对WXSS还做了一些扩充和修改。例如，新增了尺寸单位。在写CSS样式时，开发者需要根据手机屏幕所具有的不同宽度和设备像素比，采用一些技巧来换算像素单位。WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼，只要交给小程序底层进行换算即可。由于换算采用的是浮点数运算，所以运算结果会和预期结果稍有偏差。
小程序提供了全局样式和局部样式。和前面app.json、page.json的概念类似，app.wxss可作为全局样式，作用于当前小程序的所有页面，page.wxss为局部样式，仅对当前页面生效。
此外，WXSS仅支持部分CSS选择器。1.3.4 .js脚本交互逻辑
一个服务只有界面展示是不够的，还需要和用户进行交互，如响应用户的点击，获取用户的位置等。在小程序里面，我们可以通过编写.js脚本文件来处理用户的操作。.wxml文件代码示例如下：
点击button按钮的时候，我们希望把界面上msg显示成“Hello World”，于是我们在button上声明一个属性bindtap，在.js文件里面声明了clickMe方法来响应这次点击操作。.js文件代码示例如下：Page({ clickMe: function() { this.setData({ msg: "Hello World" }) }})
响应用户的操作就是这么简单。
此外，还能在.js脚本中调用小程序提供的丰富的API，利用这些API可以很方便地调用微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边1.2节“第一个微信小程序”例子中，在pages/index/index.js就调用了wx.getUserInfo获取微信用户的头像和昵称，最后通过setData把获取到的信息显示到界面上。
通过本节，你了解了小程序涉及的文件类型以及对应的角色，在下一节中，我们介绍小程序提供的能力。1.4 小程序的能力
1.启动
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
接下来，通过app.json的pages字段可以知道当前小程序的所有页面路径，代码示例如下：{ "pages":[ "pages/index/index", "pages/logs/logs" ]}
这个配置说明在“第一个微信小程序”项目中定义了两个页面，分别位于pages/index/index和pages/logs/logs。写在pages字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。于是微信客户端把首页的代码装载进来，通过小程序底层的一些机制可以渲染出这个首页。
小程序启动之后，会执行在app.js定义的App实例的onLaunch回调，代码示例如下：App({ onLaunch: function () { //小程序启动之后触发 }})
整个小程序只有一个App实例，由全部页面共享。接下来，我们简单看看小程序的一个页面是怎么写的。
2.页面
可以观察到pages/logs/logs下包括了4种文件，微信客户端会先根据logs.json配置生成一个界面，顶部的颜色和文字都可以在这个JSON文件里面定义好。接下来，客户端会装载这个页面的WXML结构和WXSS样式。最后，客户端会装载logs.js，你可以看到logs.js的大体内容，代码示例如下：Page({ data: { //参与页面渲染的数据 logs: [] }, onLoad: function () { //页面渲染后执行 }})
Page是一个页面构造器，这个构造器生成了一个页面。在生成页面的时候，小程序框架会把data数据和index.wxml一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个onLoad回调，可以在这个回调处理你的逻辑。
3.组件
小程序为开发者提供了丰富的基础组件，开发者可以像搭积木一样组合各种组件，将其拼合成自己的小程序。
与HTML的div、p等标签一样，在小程序里，你只需要在WXML中写上对应的组件标签名字，就可以把该组件显示在界面上。例如，你需要在界面上显示地图，只需要如下编写代码即可：
使用组件的时候，可以通过属性将值传递给组件，让组件展现不同的状态。例如，我们希望地图一开始时中心的经纬度是广州，那么需要声明地图的longitude（中心经度）和latitude（中心纬度）两个属性，代码示例如下：
组件的内部行为也会通过事件让开发者可以感知。例如，用户点击了地图上的某个标记，你可以在.js脚本中编写markertap函数来处理，代码示例如下：
当然你也可以通过style或者class来控制组件的外层样式，以便适应你的界面宽度和高度等。
4.API
为了让开发者可以很方便地调用微信提供的能力，例如获取用户信息、微信支付等，小程序为开发者提供了很多API。
获取用户的地理位置，代码示例如下：wx.getLocation({ type: 'wgs84', success: (res) => { var latitude = res.latitude //纬度 var longitude = res.longitude //经度 }})
调用微信扫一扫能力，代码示例如下：wx.scanCode({ success: (res) => { console.log(res) }})
需要注意的是，多数API的回调都是异步的，你需要处理好代码逻辑的异步问题。
当你开发一个小程序之后，就需要发布你的小程序。下节将介绍发布前需要做的准备工作。1.5 小程序发布准备
如果你只是一个人开发小程序，可以暂时先跳过这部分，如果是一个团队开发小程序，需要先了解一些概念。
1.用户身份
如果是一个团队开发小程序，那么团队成员的身份管理是很有必要的。管理员可在小程序管理后台统一管理项目成员（包括开发者、体验者及其他成员），设置项目成员的权限。管理入口位于“小程序管理后台→用户身份→成员管理”，如图1-6所示。图1-6 用户身份管理
对不同的用户可以设置不同的使用权限，如下所示。
·开发者权限：可使用小程序开发者工具及开发版小程序进行开发。
·体验者权限：可使用体验版小程序。
·登录：可登录小程序管理后台，无须管理员确认。
·数据分析：使用小程序数据分析功能查看小程序数据。
·开发管理：小程序提交审核、发布、回退。
·开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序。
·暂停服务设置：暂停小程序线上服务。
2.预览
使用开发者工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。点击开发者工具顶部操作栏的“预览”按钮，开发者工具会自动打包当前项目，并上传小程序代码至微信的服务器，成功之后会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。
3.上传代码
同预览不同，上传代码是用于提交体验或者审核的。点击开发者工具顶部操作栏的“上传”按钮，填写版本号以及项目备注。需要注意的是，这里“版本号”以及项目“备注”是为了方便管理员检查版本，开发者可以根据自己的实际要求来填写这两个字段。
上传成功之后，登录“小程序管理后台→开发管理→开发版本”，就可以找到刚提交上传的版本了。可以将这个版本设置为“体验版”或者“提交审核”。
4.小程序的版本
小程序的版本有如下几种。
·开发版本：使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传代码。点击“提交审核”，可将代码提交审核。开发版本可删除，不影响线上版本和审核版本中的代码。可以使用小程序开发者助手方便快捷地预览和体验线上版本、体验版本以及开发版本。
·审核中版本：只能有一份代码处于审核中。审核结果通过后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
·线上版本：线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。1.6 小程序上线
小程序上线需要两步：提交审核，发布。
1.提交审核
为了保证小程序的质量并符合相关的规范，小程序需要经过审核才可发布。在开发者工具中上传小程序代码之后，登录“小程序管理后台”，点击“开发管理→开发版本”，找到提交上传的版本。
在开发版本的列表中点击“提交审核”。按照页面提示填写相关的信息，即可以将小程序提交审核。注意
开发者要在严格测试版本之后，提交审核；多次审核不通过，可能会影响后续的审核时间。
2.发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录“小程序管理后台”，在“开发管理→审核版本”中可以看到通过审核的版本。点击“发布”，即可发布小程序。第2章 小程序基础知识
第1章为小程序入门的各项事宜，接下来本章将介绍微信小程序开发的基础知识：项目有哪些配置文件，微信小程序的各种配置，WXSS样式语言，逻辑层.js脚本，WXML视图层开发等。2.1 项目配置文件
可以在项目根目录使用project.config.json文件（参见1.3.1节）对项目进行配置，项目配置文件的内容参见表2-1。表2-1 项目配置文件
其中，compileType的有效值如下。
·miniprogram：当前为普通小程序项目。
·plugin：当前为小程序插件项目。
setting中可以指定的内容如下：
scripts中指定自定义预处理的命令如下。
·beforeCompile：编译前预处理命令。
·beforePreview：预览前预处理命令。
·beforeUpload：上传前预处理命令。
packOptions用于配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。目前可以指定packOptions.ignore字段，忽略配置打包时符合指定规则的文件或文件夹，以跳过打包过程，这些文件或文件夹将不会出现在预览或上传的结果内。
packOptions.ignore为一对象数组，对象元素类型如下：
其中，type可以取值为folder、file、suffix、prefix、regexp、glob，分别对应文件夹、文件、后缀、前缀、正则表达式、Glob规则。所有规则值都会自动忽略大小写。提示
value字段的值若表示文件或文件夹路径，以小程序目录（miniprogramRoot）为根目录。regexp、glob仅1.02.1809260及以上版本工具支持。
配置示例代码如下：{ "packOptions": { "ignore": [{ "type": "file", "value": "test/test.js" }, { "type": "folder", "value": "test" }, { "type": "suffix", "value": ".webp" }, { "type": "prefix", "value": "test-" }, { "type": "glob", "value": "test/**/*.js" }, { "type": "regexp", "value": "\\.jsx$" }] }}注意
这部分设置的更改可能需要重新打开项目才能生效。
debugOptions用于配置在对项目代码进行调试时的选项。目前可以指定debugOptions.hidedInDevtools字段，用于配置是否显示调试器的源代码。
hidedInDevtools的配置规则和packOptions.ignore是一致的。当某个.js文件符合此规则时，调试器Sources面板中此文件源代码正文内容将被隐藏，显示代码示例如下：// xxx.js has been hided by project.config.json注：配置此规则后，可能需要关闭并重新打开项目才能看到效果。
项目配置代码示例如下：{ "miniprogramRoot": "./src", "qcloudRoot": "./svr", "setting": { "postcss": true, "es6": true, "minified": true, "urlCheck": false }, "packOptions": { "ignore": [] }, "debugOptions": {}}2.2 全局配置和页面配置
每个微信小程序项目都有一个全局配置文件和多个页面配置文件。全局配置文件针对整个微信小程序项目的相关配置信息；页面配置文件只针对对应的页面，每个微信小程序都有一个对应的页面配置文件。全局配置文件和页面配置文件如果有相同的配置项目，页面配置文件的优先级高于全局配置文件，也就是以页面配置文件的效果为主。2.2.1 全局配置
我们利用小程序根目录下的app.json文件对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
每个微信小程序项目只有一个全局配置文件。下面是一个包含了部分常用配置选项的app.json：{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ]}
app.json配置项列表参见表2-2。表2-2 app.json配置项列表（1）pages
pages用于指定小程序由哪些页面组成，是一个数组，数组中每一项都对应一个页面的“路径+文件名”信息。文件名不需要写文件后缀，开发框架会自动去寻找对应位置的.json、.js、.wxml、.wxss四个文件进行处理。数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对pages数组进行修改。例如，如下开发目录中：├── app.js├── app.json├── app.wxss├── pages│ │── index│ │ ├── index.wxml│ │ ├── index.js│ │ ├── index.json│ │ └── index.wxss│ └── logs│ ├── logs.wxml│ └── logs.js└── utils
要在app.json中编写页面，则需要配置pages数组，代码如下所示。{ "pages":[ "pages/index/index", "pages/logs/logs" ]}（2）window
window用于设置小程序的状态栏、导航条、标题、窗口背景色等，属性参见表2-3。表2-3 window属性
其中，HexColor为十六进制颜色值，#ffffff表示白色，#000000表示黑色。注意
navigationStyle只在app.json中生效。开启custom后，低版本客户端需要做好兼容。开发者工具基础库版本切到客户端6.7.2版本开始，navigationStyle：custom对
app.json示例代码如下，界面示例如图2-1所示：{ "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }}图2-1 app.json示例界面（3）tabBar
tabBar用于设置小程序多tab。例如，客户端窗口的底部或顶部有tab栏可以切换页面，可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。tabBar属性参见表2-4。表2-4 tabBar属性
其中，list接受一个数组，只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象，其属性值如下：
当属性iconPath和selectedIconPath的postion为top时，不显示icon。list属性如图2-2所示。图2-2 list属性示例（4）networkTimeout
networkTimeout用于指定各类网络请求的超时时间，单位均为毫秒，networkTimeout属性参见表2-5。表2-5 networkTimeout属性（5）debug
可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册、页面路由、数据更新、事件触发等，可以帮助开发者快速定位一些常见的问题。（6）functionalPages
基础库2.1.0开始支持，低版本需做兼容处理。启用插件功能页时，插件所有者小程序需要将functionalPages设置为true。（7）subpackages
微信客户端6.6.0、基础库1.7.3及以上版本支持。启用分包加载时，声明项目分包结构。写成subPackages也支持。（8）workers
使用Worker处理多线程任务时，设置Worker代码放置的目录。（9）requiredBackgroundModes
微信客户端6.7.2及以上版本支持。声明需要后台运行的能力，类型为数组。目前支持以下项目：Audio后台音乐播放，代码示例如下：{ "pages": ["pages/index/index"], "requiredBackgroundModes": ["audio"]}注意
此处声明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。（10）plugins
基础库1.9.6开始支持，低版本需做兼容处理。声明小程序需要使用的插件。（11）preloadRule
基础库2.3.0开始支持，低版本需做兼容处理。声明分包预下载的规则。（12）resizable
基础库2.3.0开始支持，低版本需做兼容处理。在iPad上运行的小程序可以设置支持屏幕旋转。（13）navigateToMiniProgramAppIdList
基础库2.4.0开始支持，低版本需做兼容处理。当小程序需要使用wx.navigateToMini-Program接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序的AppID列表，最多允许填写10个。2.2.2 页面配置
每一个小程序的页面可以使用.json文件对本页面的窗口表现进行配置。页面配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项，页面配置属性参见表2-6。
配置样例代码如下：{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light"}表2-6 页面配置属性提示
页面的.json只能设置window相关的配置项，以决定本页面的窗口表现，所以无须写window这个键。2.3 WXSS样式语言
WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时，为了更适合开发微信小程序，WXSS对CSS进行了修改和扩充。
与CSS相比，在微信小程序WXSS扩展的特性有：
·尺寸单位。
·样式导入。
·全局样式和局部样式。
内联样式和选择器沿用了CSS的功能写法。
1.尺寸单位
尺寸单位为rpx（responsive pixel），可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素，不同设备的换算方式如下：
在开发微信小程序时，建议设计师使用iPhone6作为视觉稿的标准。注意
在较小的屏幕上不可避免会有一些毛刺，在开发时尽量避免这种情况。
2.样式导入
可以使用@import语句导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用分号“；”表示语句结束。代码示例如下：/** common.wxss **/.small-p { padding:5px;}/** app.wxss **/@import "common.wxss";.middle-p { padding:15px;}
3.全局样式与局部样式
定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的.wxss文件中定义的样式为局部样式，只作用于对应的页面，并会覆盖app.wxss中相同的选择器。
4.内联样式
框架组件上支持使用style和class属性来控制组件的样式，说明如下。
·style：静态的样式统一写到class中，style接收动态的样式，在运行时会进行解析，尽量不要将静态的样式写进style，以免影响渲染速度，代码示例如下：
·class：用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上.，样式类名之间用空格分隔，代码示例如下：
5.选择器
目前支持的选择器有：
试读结束[说明：试读内容隐藏了图片]