小程序开发(一)

**

学习路线及大纲

**

第一节 邂逅小程序

一、小程序诞生背景
市场层面
1、什么是微信小程序？
微信小程序是一种全新的连接用户和服务的方式，它可以在微信内被快捷地获取和传播，同时具有出色的使用体验。换言之，微信小程序是微信生态的一部分，它提供了一种更加方便高效的用户交互方式。
2、小程序带来了那些？
1〉便捷性
普通APP：了解app–下载–打开–注册–使用
小程序：了解app–打开（扫码/搜索）–使用
2〉优于公众号和H5的页面，提高用户体验
3〉释放手机内存
目前，小程序不能超过8M，包括在使用分包的情况下
3、小程序开发的必要性
1〉开发出的小程序，用户体验优于H5的体验，并且底层可以调用原生的各种接口
2〉一端开发，多端运行（ios端、Android端）
技术层面
1、webview的发展和不足
1〉公众号的出现，提高了webview的使用频率，不少企业和个人都需要做H5页面，但H5无法调动很多底层APP拥有的功能。
2〉微信团队提供了JS-SDK 给web开发者使用，包括拍照、音频、地图、支付、分享等能力。
3〉无法改变H5的缺点：某个页面经常白屏，交互无反馈，页面切换生硬
如下： webview 在加载一个页面时经历的过程

解决了调用底层功能的问题，但是没有解决用户体验差的问题
解决体验差的问题，必须依靠原生，例如Native
弊端：开发门槛高、多端开发或者试配、版本更新需要审核、版本迭代慢
出现一种新的解决方案：

二、小程序诞生
1、特点
1〉类似于web开发模式，入门门槛低：基本上是类似于html+css+js
2〉可直接云端更新：微信审核
3〉提升用户体验：通过提供基础能力、原生组件结合等方式，提升用户体验
4〉平台管控能力：小程序提供云端更新，通过代码上传、审核等方式，增强对开发者的管控能力
5〉双线程模式：逻辑层和渲染层分开加载，提供了管控性和开放性（沙盒环境运行js代码，不允许执行任何和浏览器相关的接口，比如跳转页面、操作DOM等）
2、小程序开发历史
2016年9月21日发布的小程序内测版
2017年1月9日正式上线
https://developers.weixin.qq.com/miniprogram/dev/framework/release/
3、小程序预备知识
小程序开发主要分为三部分：
页面布局：WXML，类似于HTML开发
页面样式：WXSS，几乎就是CSS（某些不支持，某些进行了增强）
页面脚本：JavaScript+WXS（JS以及WeixinScript后续学习）

三、开发前准备工作

1、申请AppID
登陆微信公众平台：https://mp.weixin.qq.com/cgi-bin/loginpage
根据提示一路走下去就ok啦
找到自己的开发者ID

2、小程序开发者工具
开放工具：官方微信web开发者工具 、VSCode
下载微信web开发者工具
有什么问题，找微信开发者社区https://developers.weixin.qq.com/community/develop?idescene=1
四、小程序目录结构
首先将系统自带的代码删除，只保留下面两个文件即可

理论知识
应用程序结构
小程序结构划分：最上层 App–〉多个Page—〉多个组件


其中，app.json是程序的入口，在app.json中定义多个页面 ，到相应页面中的wxml文件中可对当前页面进行布局，wxss文件时修改页面的样式
五、小程序初体验
1、小程序的数据绑定 {{}}–>mustache
在小程序中不允许进行跳转页面，但有些东西不能一次性确定，会根据情况有所改变，此时就需要数据绑定，将要变化的值抽取成一个变量，写到js文件的data属性中。
例如：将hello后的抽象为一个变量，先在js文件的data属性中定义好，在wxml文件中使用双大括号语法，即{{}}，也叫mustache语法


2、列表显示 wx:for
先在js文件中建立一个数组如下：

使用wx:for语法对students数组进行循环输出

3、事件监听改变data的值
在页面定义一个计数器，类似于上述方法

在js文件中定义counter

但此时的计数器是写死的，不能进行改变，设置两个按钮，对数值进行改变，

在js文件中定义各自的方法

完成计数器对数值进行加减的操作。
六、小程序的MVVM架构
MVVM：M（Model） V（View） VM（ViewModel）
Vue的MVVM：

小程序的MVVM：

MVVM加构将我们从命令式编程转移到声明式编程
编程范式分为：
1〉命令式范式：原生操作DOM
2〉声明式范式：Vue/React/Angular
七、小程序架构和配置
常见的配置文件：
（一般不修改）
project.config.json:项目配置文件，比如项目名称、appid等
sitemap.json:小程序搜索相关的
（经常修改）
app.json:全局配置
page.json:页面配置
1、全局配置
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html



注:如果默认提供的代码格式不是很整齐,可以按快捷键Alt+Shift+F键将代码格式化,使得代码结构清晰


2、页面配置
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
注：页面中配置项在当前页面会覆盖app.json的window中相同的配置项。
一般将主页面的下拉刷新关闭。

在子页面进行下拉刷新的相应设置。且在设置时不能使用window关键字，使用无效，要设置那个属性直接使用即可。

在此处可设置要编译的页面，否则每次编译完成后默认显示是首页，须手动跳转到编译的页面看效果。