您现在的位置是：首页 >技术交流 >前端系列-微信小程序方面网站首页技术交流

1、简述微信小程序的生命周期函数？

     onLoad：页面加载时触发，一个页面只会调用一次。

     onShow：页面显示/切入时前台出发调用。

     onReady：页面初次渲染完成时的触发，一个页面只会调用一次。

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

     onUnLoad：页面卸载时触发。

2、小程序页面之间有哪些传值或传送数据的方法？

      使用全局遍历实现数据传递

      页面跳转到重定向时，使用url带参数传递数据

      使用组件模版 template传递参数

      使用缓存传递参数、使用数据库传递参数

3、描述下微信小程序的相关文件类型？

      wxml：模版文件，可以构建出页面的结构。

      wxss：样式文件，是一套样式语言，用于描述WXML的组件样式。

      js：脚本逻辑文件，处理网络请求。

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

      app.json：整个小程序全局配置

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

      app.wxss：全局配置的样式文件

4、简述微信小程序的优劣势？

      优点：1、容易上手，基础组件比较全，基本不需要考虑兼容问题。

                 2、开发文档比较完善，开发社区比较活跃，支持插件式开发。

                 3、良好的用户体验，无需下载，打开速度快。

                 4、开发成本比APP低。

                 5、为用户提供良好的保障。（小程序发布，严格是审查流程）。

     缺点：1、限制较多，页面大小不能超过1M，不能打开超过5个层级的页面。

                2、样式单一，部分组件已经是成型的，样式不可修改。

                3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广。

                4、后台调试麻烦，因为api接口必须https请求且公网地址。

5、简述微信小程序和H5的区别？

      1、运行环境不同

            小程序在微信运行，h5在浏览器运行。

      2、开发成本不同

            h5需要兼容不同的浏览器

      3、获取系统权限不同

           系统级权限可以和小程序无缝衔接

      4、应用在生成环境的运行速度流程

           h5需不断对项目优化来提高用户体验

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

使用wx.getUserlnfo方法 withCredentials为true时，可获取encryptedData，里面有union_id，后端需要进行对称解密

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

方式一：
1、在小程序的目录下新建一个 api 的文件夹
2：在 api 文件夹中新建一个 config.js 文件，用于存放公共的服务器地址，内容如下：
const baseUrl = 'https://www.baidu.com/';
export {
baseUrl
}

3：在 api 文件夹中新建一个 request.js 文件，用于存放封装的api请求，内容如下：
import { baseUrl } from './http.js'
module.exports = {
/*
* url:请求的接口地址
* methodType:请求方式
* data: 要传递的参数
*/
request : function(url, methodType, data){
let fullUrl = `${baseUrl}${url}`
let token = wx.getStorageSync('token') ? wx.getStorageSync('token') : ''
wx.showLoading({ title: "加载中" });
return new Promise((resolve,reject)=>{
wx.request({
url: fullUrl,
method:methodType,
data,
header: {
'content-type': 'application/json', // 默认值
'x-api-key': token,
},
success: (res) => {
if (res.data.status == 200) {
resolve(res.data)
}else{
wx.showToast({
title: res.data.msg,
icon:'none'
})
reject(res.data.message)
}
},
fail: () => {
wx.showToast({
title: '接口请求错误',
icon:'none'
})
reject('接口请求错误')
},
complete: () => {
setTimeout(() => {
wx.hideLoading()
}, 100)
}
})
})
}
}
4：在 api 文件夹中新建一个 index.js 文件，用于存放api请求的地址，内容如下：
import { request } from './request'

module.exports = {
// 获取企业列表
getCompanyList: (data) => request('/company/getlist', 'GET', data),
}
5：在文件中使用，内容如下：
// 引入 api 下的 index 文件
const $api = require('../../api/index')

// 在方法中调用
goList(){
let data = {
aaa: this.data.cardCur,
bbb: this.data.notice,
}
$api.getCompanyList(data).then((res) => {
console.log(res,'res');
})
},
方式二：
前3步是一样的，区别就是封装请求的不同
封装所有请求 api/http.js

//引入封装的reuest请求
const {
request
} = require('./request.js')

//基于业务封装的接口
module.exports = {
// 登录
getLogin: (data) => {
return request('/***/***/***/login', 'POST', data);
},
// 获取企业信息
getCompanyList: (data) => {
return request('/***/***/***/Company', 'GET', data);
},
}
使用

// 引入登录接口
import {
getLogin
} from '../../api/http.js'

Page({
data: {
username: '',
pwd: ''
},

onLoad() {
let params = {
username: this.data.username,
pwd: this.data.pwd
}
// 登录
getLogin(params).then(res => {
wx.setStorageSync('Cookie', res.cookies[0])
wx.switchTab({
url: '../index/index'
})
})
},

// 退出登录
handleLogOut() {
wx.clearStorageSync()
wx.navigateTo({
url: '../login/login'
})
},
})

8、微信小程序的双向绑定和Vue的区别？

小程序 直接使用this.data.key = value 是 不能更新到视图当中的。
必须使用 this.setData({ key ：value }) 来更新值。

9、微信小程序调用后台接口遇到哪些问题？

     1、数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序。

     2、小程序不可以直接渲染文章内容页这类型的html文本内容，若需显示要借助插件，但插件渲染会导致这个页面加载变慢，所以最好在后台对文章内容的 html 进行过滤，后台直接处理批量替换 p 标签 div 标签为 view 标签，然后其它的标签让插件来做，减轻前端的时间。

10、微信小程序如何实现下拉刷新？

        用view代替scroll-view，设置onPullDownRefresh函数实现