微信小程序

文件主要目录及文件作用：

• 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('[step1]API接口:${url}');
	console.log("[step2]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("[step3]请求成功: ");
					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("[step4]返回成功处理: ");
		console.log(res.data);
	},
	err => {
		console.log("[step4]返回失败处理: ");
		console.log(err);
	}
)

页面数据传递

通过url携带参数，在onLoad()中通过options获取url上的参数：

// 这两段是分别在HTML和JS中的代码
<navigator url="../index/index?userId={{userId}}"></navigator>
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的标签