微信小程序介绍
-
微信小程序理念：用完即走。扫一扫搜一搜。
- 与app的区别
面向用户:app是面向手机的全部用户，小程序是面向微信用户群体
内存占用：app太多的app可能会导致内存不足，小程序无需安装
创业机会：app市场基本饱满，小程序
开发周期：app是平均三个月双平台，小程序一般是2周
产品发布：app向几十个应用商店提交审核，小程序提交到微信开发平台审核
推广难度：app
消息推送：app频繁无用广告推送，小程序不允许主动向用户推送消息 - 小程序优点：
自带推广,触手可及用完即走，搜索，成本更低，更流畅的使用体验，更多曝光的机 会， 使用即用户，在微信打开率更高，高效的流量召回 - 小程序缺点：
小程序大小限制，整个项目所有分包大小不超过8m，单个分包不能超过2m。
小程序技术矿建还不稳定，开发方法还时常有修改
不能跳转到外链网址，间接影响小程序的开放性
不能直接分享到朋友圈（部分有权限）
需要向app一样审核上架，这点要比h5即做即用要麻烦
微信小程序大忌（不要制作诱导分享）广告类除外 - 小程序开发流程
1. 需要申请账户
2. 需要下载开发工具
3. 必须需要ssl证书
4. 事件绑定，ajax请求，api的使用
5. 上传代码
6. 提交审核（不要诱导分享，虚拟支付，抽提成千分之6）
7. 发布。
注意：小程序的名称是唯一的，个人小程序上线体验人数是15人 - 项目目录：
每个页面是由四个文件构成js，json，wxml，wxss
js页面逻辑，json页面配置项，wxml页面结构，wxss页面样式 - 全局配置（常用）：
entryPagePath：指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。
pages：用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。当未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）
window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性：
navigationBarBackgroundColor：导航栏背景颜色。
navigationBarTextStyle：导航栏标题颜色。
navigationBarTitleText：导航栏标题文字内容。
navigationStyle：导航栏样式（仅支持以下值：default 默认样式，custom 自定义导 航栏，只保留右上角胶 囊按钮。）
backgroundColor：全局的窗口背景颜色。
tabBar：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页 面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
color：tab 上的文字默认颜色，仅支持十六进制颜色。
selectedColor：tab 上的文字选中时的颜色，仅支持十六进制颜色。
backgroundColor：tab 的背景色，仅支持十六进制颜色。
borderStyle：tabbar 上边框的颜色， 仅支持 black / white。
list： tab的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab。
position：tabBar 的位置，仅支持 bottom / top。
custom：自定义tabBar。
注：其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象
usingComponents：在 app.json 中声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。建议仅在此声明几乎所有页面都会用到的自定义组件。 - 页面配置：
页面配置项与全局配置项没有什么差别只是配置的位置是不一样的页面配置是在每一个页面上的json文件配置的，全局的是在app.json文件进行配置编写 - 生命周期：
小程序生命周期：
onlaunch：监听小程序初始化，小程序初始化完成时。
onShow：监听小程序显示，小程序启动或从后台进入前台显示时。
onHide：监听小程序隐藏，小程序从前台进入后台时。
onError：错误监听函数小程序发生脚本除外，或者api调用失败时触发，会带上错误信 息。
onPageNotFound：页面不存在，监听小程序要打开的页面不存在时触发，会带上页面信息回调该函 数。
页面生命周期：
onLoad：监听页面加载。
onReady：监听页面初次渲染完成。
onSow：监听页面显示。
onHide：监听页面隐藏。
onUnload：监听页面卸载 - 全局数据：
globalData
调用方法getApp() - 跳转方法：
wx.switchTab()；跳转到tabBar页面，并关闭其他所有非tabBar页面。
wx.reLaunch()；关闭所有页面，打开到应用内的某个页面。
wx.redirectTo()；关闭当前页面，跳转到应用内的某个页面。但是不能跳转到tabBar页面。
wx.navigateTo()；保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页 面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack()；关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages获取当前的页面栈，决定需要返回几层。 - 基础api：
wx.login：登录请求api通过此api获取code码返回给后台后台返回session_key和openid
属性：
success：接口调用成功返回的函数。
fail：接口调用失败返回的函数。
wx.request：发起 HTTPS 网络请求，也就是接口数据请求。
属性：
url：请求接口的路径。
data：请求参数。
method：请求方法。
dataType：请求数据返回格式。
success：上传成功返回的函数。
fail：上传失败返回的函数。
wx.downloadFile：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB进行下载文件的操作
属性：
url：下载资源的路径。
success：下载成功返回的函数。
fail：下载失败返回的函数。
wx.uploadFile：将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求。
属性：
url：服务器路径，
fiePath：上传的文件地址。
name：文件对应的key值。
success：上传成功返回的函数。
fail：上传失败返回的函数。
wx.requestPayment：发起微信支付（这个需要在小程序微信公众平台进行权限设置）
属性：
timeStamp：支付时的事件戳。
signType：签名算法，应与后台下单时的值一致。
success：调用接口成功返回的函数。
fail：调用接口失败返回的函数 - 本地存储：
异步：
wx.setStorage：将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内 容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
wx.removeStorage：从本地缓存中移除指定 key。
wx.getStorageInfo：获取当前本地存储的全部信息。
wx.getStorage：通过key从本地存储获取指定的信息。
wx.clearStorage：清除当前本地全部的信息。
同步：
wx.setStorageSync：将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对 应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
wx.removeStorageSync：从本地缓存中移除指定 key。
wx.getStorageInfoSync：获取当前本地存储的全部信息。
wx.getStorageSync：通过key从本地存储获取指定的信息。
wx.clearStorageSync：清除当前本地全部的信息。 - 自定义组件的使用方法：
在需要引入的页面的json配置文件里进行配置
通过usingComponents进行配置。：前是自定义组件名称，：后是组件的路径。配置完成后通过自定义组件名称进行调用即可 - wxml：
wxml介绍：WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
wxml数据绑定：
简单绑定，数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：内容（通过双大括号即可），组件属性（需要在双引号之间通过双大括号进行使用），控制属性（需要在双引号之间通过双大括号进行使用），关键字（需要在双引号之间通过双大括号进行使用），
运算：可以在 {{}} 内进行简单的运算，支持的有如下几种方式：
三元运算：例：hidden="{{flag ? true : false}}"
算数运算：例：<view> {{a + b}} + {{c}} + d </view>
逻辑判断：例：wx:if="{{length > 5}}"
字符串运算：例：{{"hello" + name}}
数据路径运算：例：{object.key}} {{array[0]}}
组合：也可以直接在页面上机型组合，构成新的对象或数组
数组：例：<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
对象：例：data="{{for: a, bar: b}}"（也可以使用扩展运算符...来将一个对象展开）
注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面。
wxml列表渲染：
wx:for：在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item（使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名，wx:for 也可以嵌套）
wx:key：如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供：1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
注意：当 wx:for 的值为字符串时，会将字符串解析成字符串数组。花括号和引号之间如果有空格，将最终被解析成为字符串。
wxml条件渲染：
vx:if：在框架中，使用 wx:if="" 来判断是否需要渲染该代码块。
例：<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块。
例：<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>
wx:if与hidden的对比：因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。 - 小程序组件库：
vant weapp
使用方法：
首先要在开发者工具菜单栏打开工具-->构建npm
然后就在项目文件下打开cmd命令行工具输入
安装完成后修改app.json，将 app.json 中的 "style": "v2" 去除npm i @vant/weapp -S --production
不去除的话会造成组件样式紊乱，因为小程序的新版基础组件强行 加上了许多样式，难以覆盖
修改project.config.json，开发者工具创建的项目， miniprogramRoot 默认为 miniprogram，package.json 在其外 部，npm 构建无法正常工作需要手动在 project.config.json 内添 加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。{ ... "compilerOptions": { ... "baseUrl": ".", "types": ["miniprogram-api-typings"], "paths": { "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"] }, "lib": ["ES6"] } }
注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可