发表于： 2019-11-29 22:16:35
1 1063
今天完成的事：
复习、完成了复盘评审
明天计划的事：
复习
遇到的问题：
暂无
收获：
微信小程序
文件主要目录及文件作用
- component —————————————————— 组件文件夹
- navBar —— 底部组件
- navBar.js —— 底部组件的 JS 代码
- navBar.json —— 底部组件的配置文件
- navBar.wxml —— 底部组件的 HTML 代码
- navBar.wxss —— 底部组件的 CSS 代码
- pages ————————————————————— 页面文件夹
- index —— 首页
- index.js —— 首页的 JS 代码
- index.json —— 首页的配置文件
- index.wxml —— 首页的 HTML 代码
- index.wxss —— 首页的 CSS 代码
- public ————————————————————— 图片文件夹
- utils —————————————————————— 工具文件夹
- api.js —— 控制 API 的文件
- md5.js —— 工具 - MD5 加密文件
- timestamp.js —— 工具 - 时间戳文件
- app.json ——————————————————— 设置全局的基础数据等
- app.wxss ——————————————————— 公共样式，可通过 import 导入更多
- project.config.json ———————— 项目配置文件
复制代码
微信小程序生命周期
onLoad()：页面加载时触发。
onShow()：页面显示/切入前台时触发。
onReady()：页面初次渲染完成时触发。
onHide()：页面隐藏/切入后台时触发。
onUnload()：页面卸载时触发。
复制代码
如何封装数据请求
1，封装接口
项目/utils/api.js
// 将请求进行 Promise 封装
const fetch = ({url, data}) => {
// 打印接口请求的信息
console.log(`【step 1】API 接口：${url}`);
console.log("【step 2】data 传参：");
console.log(data);
// 返回 Promise
return new Promise((resolve, reject) => {
wx.request({
url: getApp().globalData.api + url,
data: data,
success: res => {
// 成功时的处理
if (res.data.code == 0) {
console.log("【step 3】请求成功：");
console.log(res.data);
return resolve(res.data);
} else {
wx.showModal({
title: '请求失败',
content: res.data.message,
showCancel: false
});
}
},
fail: err => {
// 失败时的处理
console.log(err);
return reject(err);
}
})
})
}
/**
* code 换取 openId
* @data {
* jsCode - wx.login() 返回的 code
* }
*/
export const wxLogin = data => {
return fetch({
url: "tbcUser/getWechatOpenId",
data: data
})
}
2，调用接口
项目/pages/login/login.js
import {
wxLogin,
} from '../../utils/api.js'复制代码
3，使用接口
项目/pages/login/login.js
wxLogin({
jsCode: this.data.code
}).then(
res => {
console.log("【step 4】返回成功处理：");
console.log(res.data);
},
err => {
console.log("【step 4】返回失败处理：");
console.log(err);
}
)
页面数据传递
通过 url 携带参数，在 onLoad() 中通过 options 获取 url 上的参数：
<navigator url="../index/index?userId={{userId}}"></navigator>
<!-- 这两段是分别在 HTML 和 JS 中的代码 -->
onLoad: function(options) {
console.log(options.userId);
}
通过 Storage 来传递参数：
wx.setStorageSync('userId', 'jsliang');
wx.getStorageSync('userId');
复制代码
WXML传递数据到 JS
login.wxml
<text bindtap="clickText" data-labelId="{{userId}}">点击传递数据到 JS</text>
login.js
clickText(e) {
console.log(e.currentTarget.labelid)
}
组件调用传参
组件接收数据：component-tag-name
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
}
})
使用组件的页面定义 json
{
"usingComponents": {
"component-tag-name": "../component/component"
}
}
使用组件的页面 HTML 代码
<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
通过接口调用传递参数
加载性能优化方法
1、通过 this.$preload() 预加载用户可能点击的第二个页面
2、组件化页面，出现两次以上的部分都进行封装成组件
3、提取共用的 CSS 样式
4、优化图片：TinyPNG
微信小程序与原生APP、Vue、H5差异
微信小程序优势
1、无需下载
2、打开速度较快
3、开发成本低于原生APP
微信小程序劣势
1、限制多。页面大小不能超过 1M，不能打开超过 5 个层级的页面
2、样式单一。小程序内部组件已经成宿，样式不可以修改
3、推广面窄。跑不出微信，还不能跑入朋友圈
微信小程序 VS 原生APP
微信小程序有着低开发成本、低获客成本、无需下载的优势
微信小程序 VS H5
1、依赖环境不同。一个能在多种手机浏览器运行。一个只能在微信中的非完整的浏览器
2、开发成本不同。一个可能在各种浏览器出问题。一个只能在微信中运行
微信小程序 VS Vue
微信小程序看似就是阉割版的 Vue
微信小程序原理
本质上就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面中进行
架构为数据驱动的模式，UI 和数据分离，所有页面的更新，都需要通过对数据的更改来实现
微信小程序分为两个部分：webview 和 appService。其中 webview 主要用来展示 UI，appServer 用来处理业务逻辑、数据及接口调用。它们在两个进程中进行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理
wxml与标准的html的异同
wxml基于xml设计，标签只能在微信小程序中使用，不能使用html的标签
返回列表
评论