微信小程序

微信小程序

微信小程序：(Mini Program)一种不需要下载安装即可使用的应用

appid:开发小程序的唯一标识,小程序平台的一个身份证

根目录下的：

app.js 小程序逻辑

app.json 小程序公共配置

app.wxss 小程序公共样式表

页面由四个文件组成

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间等

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等

工具配置 project.config.json

为开发工具做的个性化配置，例如界面颜色、编译配置等等

sitemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引

所有页面都会被微信索引（默认情况）

{
    "rules":[{"action": "allow","page": "*"}]
}

配置 path/to/page 页面不被索引，其余页面允许被索引

{
    "rules":[{"action": "disallow","page": "path/to/page"}] 
}

util公共函数定义及读取

util目录下的util.js文件专用于小程序项目中的公共函数定义，可以将项目开发过程中的公共代码方法提取封装到util.js文件中

//通过require方式引入整个util 
const util=require("../../utils/util") 
//通过import方式引入整个util 
import util from "../../utils/util" 
//引入指定的模块 
import {formatTime} from "../../utils/util"

小程序的两种生命周期

在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面

App()函数用来注册一个小程序。接受一个 Object参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次。

App({
    onLaunch: function(options) {
        // 监听小程序初始化。小程序初始化完成时（全局只触发一次）
    },
    onShow: function(options) {
        // 监听小程序显示。小程序启动，或从后台进入前台显示时
    },
    onHide: function() {
        // 监听小程序隐藏。小程序从前台进入后台时。
    },
    onError: function(msg) {
        console.log(msg) // 错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
    },
    onPageNotFound: function(res) {
        // 页面不存在监听函数。小程序要打开的页面不存在时触发，会带上页面信息回调该函数
    },
    globalData: {//全局参数}
})

Page(Object)函数用来注册一个页面。接受一个 Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等

Page({
  data: {
    // 页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 生命周期回调—监听页面加载
  },
  onReady: function() {
    // 生命周期回调—监听页面初次渲染完成
  },
  onShow: function() {
    // 生命周期回调—监听页面显示
  },
  onHide: function() {
    // 生命周期回调—监听页面隐藏
  },
  onUnload: function() {
    // 生命周期回调—监听页面卸载
  },
//  ---------------以下不是生命周期钩子函数----------------
  onPullDownRefresh: function() {
    // 监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
    // 用户点击右上角转发
  },
  onPageScroll: function() {
    // 页面滚动触发事件的处理函数
  },
  onResize: function() {
    // 页面尺寸改变时触发
  },
  onTabItemTap(item) {
    // 当前是 tab 页时，点击 tab 时触发
    
  },
  
})

onLoad: 页面加载。一个页面只会调用一次。参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 页面显示。每次打开页面都会调用一次。

onReady:页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onHide: 页面隐藏。当navigateTo或底部tab切换时调用。

onUnload: 页面卸载。当redirectTo或navigateBack的时候调用。

注册组件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //接收父组件传递过来的值
  },
    /* 
    监听 
    */
    observers:{
       
    },

  /**
   * 组件的初始数据
   */
  data: {
   
  },

  /**
   * 组件的方法列表
   */
  methods: {
    name:function(e){
        //向父组件传值
        this.triggerEvent('myevent','传递的值')    
    }
  }
})

{
  "usingComponents": {
    //在需要使用组件的page下的json页面中引用组件
  }
}

web-view承载网页的容器

web-view只有在以上跳转新页面中可以使用

微信小程序登录

1、前端调用wx.login()，获取微信临时登录凭证code

//示例代码 wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://example.com/onLogin',//自己的后端接口 data: { code: res.code } }) } else { console.log('登录失败！' + res.errMsg) } } })

临时登录凭证 code 只能使用一次，code生成以后5分钟失效

2、把code传给后端，后端调用auth.code2Session接口，换取微信用户唯一标识OpenID和session_key

3、如果openid存在于数据库当中，说明用户以前已经授权登录过了，直接根据openid查询用户的信息，返回信息和token

由后端完成。

4、如果openid不存在数据库当中，把openid存到数据库当中，相当于插入了user用户，只不过昵称、头像都是空的，依然返回用户信息和token

由后端完成。

5、前端获取到用户信息，如果用户信息是空的，说明没有授权登录过，就要显示授权按钮，等待用户授权

注：授权是指让用户同意把他的微信头像、名称等信息交给你，授权本身和登录是不挂勾的，只是登录要使用到授权提供的这些信息