知识点总结小程序

1、小程序的相关文件类型

　　微信小程序项目结构主要有四个文件类型：

　　　　wxml　　框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。

　　　　wxss　　是一套样式语言，用于描述wxml的组件样式

　　　　js　　逻辑处理，网路请求

　　　　json　　小程序设置，如页面注册，页面标题及tabBar

　　主要文件：

　　　　app.json　　必须。这个文件是配置文件入口，整个小程序的全局配置。包括页面注册，网路设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

　　　　app.js　　必须。这里监听并处理小程序的生命周期函数，声明全局变量。

　　　　app.wxss　　可选

2、简述微信小程序原理

　　微信小程序采用JavaScript、wxml、wxss三种技术进行开发，本质就是一个单页面项目，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口。

　　微信的架构，是数据驱动的架构样式，它的ui和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。

　　小程序分为两个部分：webview和appServer。其中webview主要用来展现ui，appServer用来处理业务逻辑、数据及接口调用。它们在两个进程中执行，通过系统层JSBridge实现通信，实现ui的渲染、事件的处理。

3、小程序的双向绑定和vue哪里不一样

　　小程序直接使用this.data的属性是不能同步到视图的，必须调用：

    this.setData({
           //这里设置     
    })

4、小程序的wxss和css哪里不一样

　　wxss和css类似，不过在css的基础上做了一些补充和修改

　　尺寸单位：rpx

　　　　rpx是响应式像素，可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素。

　　使用@import标志符来导入外联样式，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

　　/** index.wxss **/
　　@import './base.wxss';

　　.container{
　　    color: red;
　　}

5、小程序有哪些传递数据的方法

　　①使用全局变量实现数据传递

　　　　在app.js中定义全局变量globalData，将需要存储的信息放在里面

　　//app.js
　　App({
　　   globalData:{
    　　   userName:"孙艺珍"
　　   }          
　　})

　　　　使用时，直接使用getApp()拿到存储的信息

　　②使用wx.navigateTo与wx.redirectTo的时候，可以将部分数据放在url里面，并在新页面onLoad的时候初始化

//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})


// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

　　　　需要注意的问题：wx.navigateTo和wx.redirectTo不能跳转到tab所包含的页面

　　　　　　　　　　　　onLoad只执行一次

　　③使用本地缓存Storage相关

6、小程序的生命周期函数

　　onLoad　　页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数

　　onShow　　页面显示/切入前台时触发

　　onReady　　页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

　　onHide　　页面隐藏/切入后台时触发。如navigateTo或底部tab切换到其他页面，小程序切入后台等

　　onUnload　　页面卸载时触发，如redirectTo或navigateBack到其他页面时

7、怎么封装小程序的数据请求

const baseUrl = 'https://api.it120.cc';

const http = ({ url = '', param = {}, ...other } = {}) => {
    wx.showLoading({
        title: '请求中，请耐心等待..'
    });
    let timeStart = Date.now();
    return new Promise((resolve, reject) => {
        wx.request({
            url: getUrl(url),
            data: param,
            header: {
                'content-type': 'application/json' // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"
            },
            ...other,
            complete: (res) => {
                wx.hideLoading();
                console.log(`耗时${Date.now() - timeStart}`);
                if (res.statusCode >= 200 && res.statusCode < 300) {
                    resolve(res.data)
                } else {
                    reject(res)
                }
            }
        })
    })
}

const getUrl = (url) => {
    if (url.indexOf('://') == -1) {
        url = baseUrl + url;
    }
    return url
}

// get方法
const _get = (url, param = {}) => {
    return http({
        url,
        param
    })
}

const _post = (url, param = {}) => {
    return http({
        url,
        param,
        method: 'post'
    })
}

const _put = (url, param = {}) => {
    return http({
        url,
        param,
        method: 'put'
    })
}

const _delete = (url, param = {}) => {
    return http({
        url,
        param,
        method: 'put'
    })
}
module.exports = {
    baseUrl,
    _get,
    _post,
    _put,
    _delete
}

　　使用：

const api = require('../../utils/api.js')

// 单个请求
api.get('list').then(res => {
  console.log(res)
}).catch(e => {
  console.log(e)
})

// 一个页面多个请求
Promise.all([
  api.get('list'),
  api.get(`detail/${id}`)
]).then(result => {
  console.log(result)
}).catch(e => {
  console.log(e)
})

8、哪些方法可以提高微信小程序的应用速度

　　提高页面加载速度

　　用户行为预测

　　减少默认data的大小

　　组件化方案

9、微信小程序的优劣势

　　优势：①即用即走，不用安装，省流量，省安装时间，不占用桌面

　　　　　②依托微信流量，推广传播优势好

　　　　　③开发成本比app低

　　劣势：①用户留存，即用即走是优势，也存在一些问题

　　　　　②入口相对传统app要深很多

　　　　　③限制较多，页面大小不能超过2M，不能打开超过10个层级的页面

10、怎么解决小程序的异步请求问题

　　小程序支持大部分ES6语法

　　　　在返回成功的回调里处理逻辑

　　　　Promise异步

11、小程序关联微信公众号如何确定用户的唯一性

　　如果开发者拥有多个移动应用、网站应用、公众账号（包括小程序），可通过unionid来区分用户的唯一性，因为只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号（包括小程序），用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。

12、如何实现下拉刷新

　　①首先在迁居config中的window配置enablePullDownRefresh

　　②在Page中定义onPullDownRefresh钩子函数，到达下拉刷新条件后，该钩子函数执行，发起请求方法

　　③请求返回后，调用wx.stopPullDownRefresh停止下拉刷新

13、bindtap和catchtap的区别是什么

　　相同点：它们都是作为点击事件函数，都是点击时触发。在这个作用上它们是一样的，可以不做区分。

　　不同点：bindtap是不会阻止冒泡事件的，catchtap是阻止冒泡的

14、简述wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.navigateBack()、wx.reLaunch()的区别

　　wx.navigateTo()　　保留当前页面，跳转到应用内的某个页面，但是不能跳到tabBar页面

　　wx.redirectTo()　　关闭当前页面，跳转到当前应用内的某个页面，但是不能跳到tabBar页面

　　wx.switchTab()　　跳转到tabBar页面，并关闭其他所有非tabBar页面

　　wx.navigateBack()　　关闭当前页面，返回上一级页面或多级页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层

　　wx.reLaunch()　　关闭所有页面，打开到应用内的某个页面

知识点总结 小程序

知识点总结小程序