一起学小程序啦

1.微信小程序是什么：

微信小程序是不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开的应用，在微信小程序的使用过程中，用户只增不减，很多的公司都开始研发属于自己的小程序。

2.如何注册微信小程序：

如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。

接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。

激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。

3.微信小程序全局&頁面：

全局配置

app.json是小程序的全局配置，包括小程序的所有页面路径、界面表现、底部 tab 等，一般包含几个字段：pages、window、tabBar

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
tabBar字段 —— 定义小程序底部tab栏的表现，以及 tab 切换时显示的对应页面。

{
  "pages": [
    "pages/index/index", 
    "pages/logs/index"
  ], // 所有页面路径
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }, // 界面表现
  "tabBar": {
    "backgroundColor": "#F7F7FA",
    "color": "#757575",
    "selectedColor": "#6D8FE8",  // 底部栏配置
    "list": [  // tab列表
      {
        "pagePath": "pages/message/index/index",  // tab对应页面路径
        "text": "消息", // tab文字显示
        "iconPath": "images/icon_message.png",  // tab默认显示图标
        "selectedIconPath": "images/icon_message_blue.png" // tab选中后的图标
      },
      {
        "pagePath": "pages/zone/index/index",
        "text": "空间",
        "iconPath": "images/icon_friend.png",
        "selectedIconPath": "images/icon_friend_blue.png"
      }
  }
 }

注： tab栏的图标icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片，同时tab列表配置最少2个，最多5个。

---

页面配置 

一个小程序页面由四个文件组成：

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

每个小程序页面可以使用自己的.json文件来对本页面的窗口表现进行配置。
页面配置一般包括导航栏标题文字内容（navigationBarTitleText），是否开启下拉刷新（enablePullDownRefresh）等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarTitleText": "个人中心",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

4.页面的声明周期：

 

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

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

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

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

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

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

5.页面之间的通讯：

小程序页面之间有时需要进行数据的传递，个人使用的页面间数据通讯有两种方式：

        1.页面A跳转到页面B时，在页面路由后携带参数，页面B在onLoad时获取options中的参数。

        页面A:

	wx.navigateTo({
      url: '../unrelate/unrelate?cname='+cname+'&cid='+cid,
    })

        页面B:

onLoad: function (options) {
    if(options.cname){
      this.setData({
        cname: options.cname,
        cid: options.cid
      })
    }
  }

        2.如果页面之间需要传递的参数为对象或者数组，那么通过路由拼接参数的形式就不可取了，此时可以通过app.js中的globalData全局变量进行赋值。

        页面A：

  onJumpToNextLevelPoint: function(e){
    let child = e.currentTarget.dataset.child
    let name = e.currentTarget.dataset.name
    if(util.isValidArray(child)){
      app.globalData.pointChild = child // 全局变量进行赋值
      wx.navigateTo({
        url: '../knowledge/knowledge?name=' + name,
      })
    }
  }

        页面B:

  onLoad: function (options) {
    if (util.isValidArray(app.globalData.pointChild)) {
      this.setData({
        progressList: app.globalData.pointChild
      })
    }
  }

6.配置request

1. 修改request域名需要注意哪些？

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

配置步骤：登录微信小程序管理后台 --> 开发 --> 开发设置 --> 服务器域名 --> 修改 request 合法域名

修改时需要注意以下事项：

• 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议
• 域名不能使用 IP 地址或 localhost
• 域名必须经过 ICP 备案
• 服务器域名一个月内可申请5次修改

2.发起GET请求：

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求

wx.request({
  url: 'https://www.xxx.com', // 请求的接口地址，必须基于https协议
  methods: 'GET', // 请求的方式
  data: {
    // 发送到后台的数据
	name: 'zs',
	age: 22
  },
  success: res => {
	// 请求成功后的回调函数
	console.log(res)
  }
})

3.发起post请球：

wx.request({
  url: 'https://www.xxx.com', // 请求的接口地址，必须基于https协议
  methods: 'POST', // 请求的方式
  data: {
  	// 发送到后台的数据
	name: 'ls',
	gender: '男'
  },
  success: res => {
	// 请求成功后的回调函数
	console.log(res)
  }
})