微信小程序商城 java后台

微信小程序学习

最近工作正好有闲暇时间，根据公司安排先前期学习调研一下“微信小程序”，以供后期解决相关的运营需求，而本篇文章就是我对此次学习的一次总结。

• 什么是小程序 ？

• 如何全面具体的学习？

• 注册与新建小程序

• 认识开发工具

• 目录结构与代码构成

  • JSON 配置文件
  • WXML 模版文件
  • WXSS 样式文件
  • JS 脚本文件

• 小程序的执行流程

• 小程序知识体系导图

• 小程序开发的重要说明

  • WXSS
  • 模版语法
  • 自定义模版
  • 数据绑定
  • 事件处理
  • 自定义组件
  • 行为 - Behaviors
  • 生命周期函数
  • 作用域
  • 多页面数据共享
  • 版本库兼容性
  • 用户权限
  • WXS

• 开源项目参考

• 下一步计划

什么是小程序 ？

个人认为在样式、功能、使用方式上接近传统APP并依赖于微信运行环境的 H5页面就是所谓的“微信小程序”。
微信小程序对比传统的 APP，它无需安装，在微信环境中可直接运行，并且依附于微信的生态圈，所以可以被更快速，方便，高效的推广。

如何全面具体的学习？

学习“微信小程序”，可以打开“微信公众平台·小程序”平台，里面有非常详细的讲解。

https://developers.weixin.qq.com/miniprogram/dev/

在这个页面中，你可以从“介绍”、“设计”、“开发”、“运营”、“数据”等各个方面对小程序进行一个全面整体的认知。

若你是位“开发者”，那么应该专注学习“设计”，“开发”这两个方面。在“设计”方面你将学会小程序的交互和更棒的用户体验方面。而在“开发”中你将从“简易教程”、“框架”、“组件”、“API”、“工具”等全方面学习如何开发一款小程序应用。

如果有其它疑问，也可以在 社区 中进行反馈交流。

认识开发工具

“微信小程序”的开发需要特定的开发工具，通过“微信开发者工具”我们可以编译、调试、预览、上传、发布小程序页面，同时还可以管理微信小程序的授权状态等。

下载 > 微信开发中工具

“微信开发者工具”分为 “beta版” 与 正式版。一般我们使用的都是正式版，而像Git，NPM 之类新功能目前只有“beta版“才支持。
“微信开发者工具”下载安装完成后，可以选择建立“小程序项目”，然后输入小程序的名称，路径以及 “appID”，然后点击“确定”即可。
“微信开发者工具”不仅可以开发小程序项目，还可以开发“插件”、“代码片段”等。
“微信开发者工具”主要有以下几个重要功能点：

1. 模拟器：可以设置网络、分辨率、缩放以及选择设备类型。
2. 编辑器：与传统的编辑器相同，进行代码的编辑。
3. 调试器：浏览器控制台，与Chrome基本相同主要新增了 appData、WXML、sensor等小程序专属的选项。
4. 编译、预览、调试、远程调试。
5. 详情：可以进行“项目设置”，“域名信息”、“腾讯云状态”。
6. 其它常用功能：社区、上传、缓存管理、场景值、腾讯云（提供了一套完整的小程序解决方案，方便新手练习）。

https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html (更多开发工具的介绍)

“微信开发者工具”常用快捷键：

键名	说明
Ctrl+B	编译项目（焦点在开发工具中）
Ctrl+R	编译项目（焦点不在开发工具中）
Ctrl+Shift+P	预览项目
Shift+Alt+F	格式化代码

目录结构与代码构成

下面是一个小程序完整的目录结构图 (请右击查看大图)。

通过观察上图的目录与文件，你会发现小程序的代码主要有以下几个文件类型构成：

• .json
• .WXML
• .wxss
• .js

JSON 配置文件
.json 文件是小程序的配置文件。
在小程序中配置文件按照应用范围又分为以下主要四种：

• project.config.json
• app.json
• pages.json
• component.json`

project.config.json
它是开发者工具和小程序项目的共同配置文件，它可以在多个开发者中维护统一的开发设置和开发环境。例如编辑器的颜色、ES6转ES5、上传代码时自动压缩、是否校验不合法域名、版本库等等。
当新的开发者下载了开发者工具后，只需要将团队中的 project.config.json 文件拷贝到本地小程序的根目录中即可。

https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html (更多关于project.config.json)

app.json
它是整个小程序应用的全局配置文件，可以设置小程序的页面、窗口、tab栏、网络超时、debug、插件、分包、多线程等。
其中常用到的字段是 pages、window以及 tabBar。
pages用于配置小程序的页面路径，其值是一个数组，数组中的第一个元素就是小程序的主页，并且在开发工具中新增一个路径时，编辑器会自动创建对应页面的目录以及文件。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

PS：路径中的文件名 “index” 与 “logs” 不要加扩展名，小程序的编译工具会自动寻找对应的文件类型进行处理。
window 用于配置窗口的样式以及标题等。

属性	说明	取值
navigationBarBackgroundColor	导航栏背景颜色	HEX
navigationBarTextStyle	black / white
navigationBarTitleText	导航栏标题文字内容	text
backgroundColor	窗口的背景色	HEX

tabBar也是比较常用的配置，用于设置 tab栏的位置（上、下）以及按钮的文字，样式和 icon。

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE (更多关于app.json)

pages.json
每个页面都有自己的 pages.json 文件。
pages.json 文件可以在全局配置 app.json 的基础上对页面进一步的进行设置。例如导航栏的颜色，标题文字等。
另外 pages.json 还可以通过 usingComponents 字段来声明当前页面引用了那些自定义组件。

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE (更多pages.json)

componet.json
componet.json 是自定义组件的配置文件。

{
  "component": true,        // 自定义组件声明
  "usingComponents": {}     // 可选项，用于引用别的组件
}

WXML 模版文件

你可以将 WXML 等同于传统 WEB开发时用到的 html，他们都是用来描述页面的结构骨架，不同的是 HTML文件由一个个html标记(Tag)组成，而 WXML则是有与之类似的“组件”组成。
除了在结构特性上与 HTML一致外，WXML 文件还支持特定的模版语法，数据绑定，事件处理、自定义模版等等。
同样的 WXML也可以分为页面的 WXML文件，自定义模版的 WXML文件以及自定义组件中的 WXML文件。

WXSS 样式文件
wxss 具有大部分 CSS的功能，所以你可以像 CSS一样去编写小程序的样式文件。
对于整个小程序公用的样式，可以放置在 app.wxss 文件中，而对于页面专用的样式，则写到对应页面的 pages.wxss文件中，其次便是自定义组件也会含有自己的 component.wxss文件。

JS 脚本文件

在小程序的脚本文件中，我们可以处理事件，响应用户请求，获取接口数据，改变数据状态…并且小程序的脚本文件默认支持commonJS规范，可以直接通过 require() 来导入模块，module.exports 导出模块，就编码的角度而言，与我们普通编写脚本文件并没有什么太大的区别，如果非要说区别的话，就是小程序中的脚本可以调用小程序内置的一些API接口，例如授权，支付等。

同样的app.js用于存放全局的数据和方法，而 pages.js 则存放每个页面自己的数据和方法，对于组件中的脚本文件而言，它保存的则是组件自己的数据和方法

小程序的执行流程

当微信客户端打开一个小程序的时候，会将整个小程序的代码包下载到本地，然后通过读取 app.json文件获取页面的路径，并将第一条路径作为首页，并根据 app.json 中的配置来初始化小程序窗口的样式。

紧接着，微信客户端再将 app.js 装载进来，执行其中的 App() 方法，实例化一个小程序对象（整个微信小程序也只有一个这样的实例对象，并且全部页面共享该对象，你可以在每个页面使用 getApp()方法来获取）。

当小程序实例对象创建完成后，会触发生命周期中的 onLaunch() 函数，然后继续装载小程序中的每个页面（默认便是首页），在装载页面的时候，同样的会先装载 pages.json的代码，用来初始化页面与窗口的样式，然后再装载 WXML文件以及其使用到的资源（wxs，模版、组件）来生成页面结构，一切就绪再加载 wxss获取页面样式，最后再去装载 .js的脚本文件。

当最后的 .js文件也被装载进来后， 就会调用脚本中的Page()构造函数，还回一个页面的实例对象，页面实例对象创建好后，就会根据其中的 data 数据与 WXML文件中的内容 一起渲染出最终的页面，最后页面渲染完成后，并且在这一过程中，页面实例会根据不同时期的状态触发不同的页面生命周期函数。

明白小程序的基本执行流程，对后面了解小程序执行的生命周期非常有帮助。

小程序知识体系导图

小程序开发的重要说明

小程序开发还是很简单的，像一些 API接口以及组件的使用，在开发手册上都有详细列举，所以这里我就将我个人认为小程序中比较常用或者是比较重要（跟传统web开发有点区别）的地方单独记录下来。
WXSS
WXSS 是基于 CSS 改进而来的，所以大部分的 CSS写法也可以套用在 WXSS 上，这里主要对这两者重点的区别加以说明。

rpx
新增的相对单位，rpx 默认将屏幕划分为750个单位。
注意的是：px 在小程序中依然也可以用。

选择器
WXSS 支持的选择器相比 CSS要少一些，但是主流的：类、ID、元素，分组、伪类（after，before）、伪元素（:hover 这里表示元素选中）等选择器都支持。
模块化样式
支持 @import “path” 导入样式。

内嵌样式
小程序中组件支持通过 style 属性来内嵌内联样式，并且还可以通过表达式来接收绑定的数据。

<view style="font-size:{{fontSize}}pt"></view>

背景图
wxss 不支持本地图片（相对路径图片）作为背景图，对于需要内嵌在 wxss文件中的图片，请使用 base64 或者是网上的图片。
不过，image 组件支持本地图片

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html (更多关于WXSS)

模版语法
WXML文件也称之为“WXML模版”文件，它与 HTML文件结构相同，都是有许多结构标记组成，只是在小程序中，这些标记被称之为“组件”。
WXML文件与 HTML文件的不同在于WXML模版支持特定的模版语法，可以直接再模版中进行运算处理。

表达式
WXML支持通过 {{variant}} 表达式来获取对应页面脚本中 data 定义的数据。

#page.wxml
<view>{{names}}</view>

#page.js
Page({
    data:{
        names:"xiaoming"
    }
})

{{}} 表达式不仅可以读取变量的值，还支持一些常规的运算操作，比如“算数运算”、“三元运算”、“比较运算”、“字符串运算”等，另外还可以在表达式中定义数组、对象等类型的值。

{{a + b}} + {{c}}
{{flag ? true : false}}
{{length > 5}}
{{"hellow" + name}}
{{[zero, 1, 2, 3, 4]}}
{{for: a, bar: b}} | {{...obj1, ...obj2, e: 5}} | {{name,age}}

好啦就先写到这里啦，有点长