微信小程序

1.要开发小程序，得先去微信公众平台申请一个appId哦。

  小程序注册地址：  https://mp.weixin.qq.com/wxopen/waregister?action=step1    

注册页面

信息都填好，勾选同意，点击注册。

注册成功页面 注册信息填写

信息填好，再点继续，微信扫码验证。前往小程序，就有了自己的小程序了。

appID查看 appid和密钥

一定要记住，保存下来。

小程序的基本信息设置

2.要用的IDE

    下载微信开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=201714

下载界面

自己是什么系统就点那个。

3.新建一个小程序项目啊

在自己的磁盘里，新建一个空文件夹，起一个自己喜欢的名字。。。。

打开微信开发者程序

新建项目

需要的信息都填好，勾选《建立普通快速启动模板》。一个小程序的demo就出来了。

4.项目结构

pages文件夹是存储小程序页面的文件夹，可以新建components和common文件夹，存储组件和公用函数。

 json 后缀的 JSON 配置文件

app.json定义项目页面相关

project.config.json定义界面颜色、编译配置等

page.json让开发独立定义每个页面的独特属性

.wxml 后缀的 WXML 模板文件（就是浏览器里的html）

关于wxml模板，标签跟html的标签是不一样的。有自己的标签。感觉小程序好像自带数据绑定。

.wxss 后缀的 WXSS 样式文件（就是浏览器里的css）

新增尺寸单位。选择器支持不全。

.js 后缀的 JS 脚本逻辑文件（就是浏览器里的js）

5.wxml

    wxml不像html那样有很多标签，他就像是一个组件库，有很多html没有的标签，比如：swiper/progress，用的时候去API里查就好了。

    view：就类似于div标签

    image：图片标签要用image

还有的就是小程序只支持单项数据流，视图的变化不会直接引起数据的变化。{{ text }}

附上链接：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

微信小程序的尺寸单位是rpx，默认所有屏幕宽度都为750rpx。视觉稿建议以iphone6为原型。

6.请求配置

开发小程序的时候，会进行数据交互，那么微信小程序的请求地址如果不是在腾讯云上，就需要自己手动配置。

微信公众平台 -> 设置 -> 服务器域名 -> 开始配置 ->验证身份-> 将各个交互的地址写上。

去掉请求校验

在本地测试的会后，因为没有后端，把上面的勾上，任何已有的请求接口，都可以返回数据，当然，只是本地。

7.生命周期

（1）应用的的生命周期

onLaunch

小程序初始化完成后，触发一次，全局只触发一次。

onShow

小程序启动，或者从后台进入前台时触发

onHide

当小程序由前台进入后台，会触发onHide。

用户首次打开小程序，触发 onLaunch（全局只触发一次）。

小程序初始化完成后，触发onShow方法，监听小程序显示。

小程序从前台进入后台，触发 onHide方法。

小程序从后台进入前台显示，触发 onShow方法。

小程序后台运行一定时间，或系统资源占用过高，会被销毁

globalData:全局数据

（2）页面的声明周期

data: object

页面的初始数据

onLoad：function -> 监听页面加载，一个页面只调用一次。参数可以获取上一页地址中的参数。

页面加载监听

onShow: function -> 页面显示

页面展示

onReady: function -> 页面初次渲染完成才会执行，后于onShow，一个页面只调一次，代表页面已准备妥当，可以进行交互。

初次渲染

onHide：页面从前台进入后台的时候，跳页或者退出，当前页面不可见的时候。当navigateTo或底部tab切换时调用。

onUnload：监听页面卸载，当redirectTo或navigateBack的时候调用。

小程序注册完成后，加载页面，触发onLoad方法。

页面载入后触发onShow方法，显示页面。

首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

当小程序后台运行或跳转到其他页面时，触发onHide方法。

当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

页面的生命周期

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。 假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

关闭小程序（基础库版本1.1.0开始支持）： 当用户从扫一扫、转发等入口(场景值为1007, 1008, 1011, 1025)进入小程序，且没有置顶小程序的情况下退出，小程序会被销毁。

借鉴地址：https://www.jianshu.com/p/0078507e14d3    感谢

8.全局配置:app.json

    导航条：tabBar

tabBar

底部导航栏，参数分别是，页面地址 / 导航文字 / icon地址 / 选中状态的icon地址。icon地址不支持网络图片。position为top时，icon不显示。

pages:

pages

在项目里的app.json文件里，pages对象的第一个元素便是该项目的首页。

9.事件绑定

    点击事件：在wxml标签里面，使用bindtap="handleFunction"。

10.模块化

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。

小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

11.网络请求

(1).请求request

wx.request(obj)

(2)选择图片文件+预览

获取图片并预览

（3）保存图片到相册

保存图片到相册

（4）获得本地图片的信息，网络图片要先download域名。

获取图片信息 成功返回的对象

（5）上传文件

文件上传

12.wepy框架

（1）项目结构

wepy框架的项目结构

其中app.wpy里面的config配置项，类似于原生app.json里面的配置。

（2）声明实例：包括应用实例、页面实例、组件实例

    应用实例：

export default class extends wepy.app{ object }

app实例

 页面实例：包括 自定义数据、自定义方法、启动函数、展示函数、配置、全局数据

export default class Index extends wepy.page{ object }

    组件实例：

export default class Counter extends wepy.component{ object }

页面、组件实例

没有在wxml里面绑定的函数，要与methods同级

（3）组件引用

    在wpy文件里引入，在script部分引入，在components的配置项里声明，就可以在<template>里面使用了。最好为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题。模板部分插入驼峰式命名的子组件标签时，不能将驼峰式命名转换成短横杆式

组件的引用

（4）循环渲染

for循环

（5）数据监听器

数据监听

（6）组件之间的交互

    类似于vue，小的话，父组件传给子组件，就用props，子组件穿父组件就是emit.。

用于监听组件之间的通信与交互事件的事件处理函数需要写在组件和页面的events对象中

（7）数据绑定

wepy数据绑定

(8)最后附上官方API链接：https://tencent.github.io/wepy/document.html#/

写的比较乱，思路不是很清晰，有的地方自己懂了，，就没往上写