小程序项目-搭建
一、小程序的第三方框架(项目选型)
腾讯 wepy
美团mpvue
京东 taro[https://taro-docs.jd.com/docs]
二、 帮助文档
mdn
三、项目搭建
新建小程序项目
输入自己的appid
搭建目录结构
目录名 | 作用 |
styles | 存放公共样式 |
components | 存放组件 |
lib | 存放第三方库 |
utils | 存放自己的工具函数库 |
request | 自己的接口帮助库 |
引入字体图标
打开阿里巴巴字体图标网站
选择图标添加值项目
使用class名 下载到本地
将样式文件由css修改为wxss
小程序中引入
app.json 配置公共tabbar
wxss rpx响应式尺寸及使用Less
5.1
小程序中的尺寸单位是rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
5.2
当出现不同尺寸设计稿时,例如375/414 要使用响应式尺寸换算方法
page px = 750rpx
1px = 750rpx/ page
100px = 750rpx * 100 / page;
假设设计稿尺寸是375px
写一个100px像素宽的盒子 利用calc属性动态计算
view{
width:calc(750rpx * 100 / 375)
}
5.3 样式导入
wxss中直接就支持,样式导入功能
也可以和less中的导入混用
使用@import 语句可以导入外联样式表,支持相对路径。
示例代码
/** common.wxss **/
.small-p { padding: 5px; }
/** app.wxss **/
@import "common.wxss"
.middle-p {padding: 15px;}
5.4 小程序不支持 通配符“*”写法
***重点***
5.5 小程序中使用less (可以配合 vsCode 中的 easy less 插件实现)
原生小程序不支持less,其他基于小程序的框架大体都支持,如wepy, mpvue, taro等。但是仅仅因为一个less功能,而去引入一个框架,肯定是不可取的。因此可以用以下方式来实现
1. 编辑器是 vscode
2. 安装插件easy less
3. 在vscode 的设置配置文件加入如下配置:
"less.compile": { "outExt": ".wxss" }
4. 在要编写样式的地方,新建less文件,如index.less 然后正常编辑即可
app.wxss 重置默认样式及定义主题色
css 语法:
var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用
/*css 语法 custom-property-name:必需。自定义属性的名称,必需以 -- 开头。value:可选。备用值,在属性不存在的时候使用。*/
var(custom-property-name, value)
/*实例*/
/*:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,除了优先级更高之外,与 html 选择器相同*/
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
------------------
/*app.wxss*/
@import "./styles/iconfont.wxss"
/*重置标签默认样式 在微信小程序中不支持通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
padding:0;
margin:0;
box-sizing:border-box;
}
/*
*主题颜色 通过变量来实现
*1. less中可以使用变量
*2. 原生css和wxss也是支持变量
*/
page{
/*定义主题色*/
--themeColor:#eb4450;
}
封装wx.request公共请求方法(request/index.js)
// 同时发送异步代码的次数(用于解决页面有同时发送1个以上接口,showLoading效果应该在最后一个请求回来关闭)
let ajaxTimes = 0;
export const request = (params)=>{
// 封装统一的请求头,接口header中加参数,有的需要token有的不需要token
// 示例:判断url中是否带有/my/请求私有路径带上header token
let header = {...params.header}
if(params.url.includes("/my/")){
// 拼接header带上token
header["Authorization"]= wx.getStorageSync("token");
}
ajaxTimes++;
// 显示加载中效果
wx.showLoading({
title:"加载中",
mask: true
})
//定义公共的 baseUrl
const baseUrl = "https://api.zbztb.cn/api/public/v1"
return new Promise((resolve, reject)=>{
wx.request({
...params,
header: header,
url: baseUrl + params.url,
success:(result)=>{
resolve(result.data);
},
fail:(err)=>{
reject(err)
},
complete:()=>{
ajaxTimes--;
if(ajaxTimes === 0){
// 关闭正在等待的图标
wx.hideLoading();
}
}
})
})
}
使用示例:
import {request} from "../../request/index.js"
const order_number="123123"
const {pay} = await request({url: "/my/orders/req_unifiedorder", method:"POST", data: {order_number}})
小程序中支持es7的async语法
es7的async号称是解决promise回调的最终方案
在小程序开发工具中,勾选es6转es5语法
下载facebook的regenerator库中的regenerator/packages/regenerator-runtime/runtime.js
在小程序目录下新建文件夹 lib/runtime/runtime.js 将代码拷贝进去
在每个需要使用的async语法的页面js文件中,都引入(不能全局引入)
import regeneratorRuntime from "../../lib/runtime/runtime";
小程序api 中采用Promise 回调的公共方法做一次封装 utils/asyncWx.js
示例:utils/asyncWx.js
export const showToast=({title})=>{
return new promise((reslove,reject)=>{
wx.showToast({
title: title,
icon: 'success',
duration: 2000
})
})
}
/**promise 形式 login*/
export const login=({title})=>{
return new promise((reslove,reject)=>{
wx.login({
timeout: 10000,
success (res) {
resolve(res)
},
fail:(err)=>{
reject(err);
}
})
})
}
页面使用:
import regeneratorRuntime from "../../lib/runtime/runtime"
import { login } from "../../utils/asyncWx.js"
Page({
// 获取用户信息
async handleGetUserInfo(e){
// 1. 获取用户信息
const { encryptedData, rawData, iv, signature } = e.detail;
// 2 获取小程序登录成功后的code
const { code } = await login();
console.log(code);
}
})
微信登录流程
小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。
登录流程时序
![](https://i-blog.csdnimg.cn/blog_migrate/1bedb40d776a2dfeae8a619a20162f21.jpeg)
说明
调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。
注意事项
会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
临时登录凭证 code 只能使用一次
支付权限分析--及支付前端大致流程
参考地址:https://www.likecs.com/show-204304406.html
官方业务流程图:https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_8_2.shtml
准备工作:
微信小程序账号:要认证、获取appid、生成 secret、开通支付、关联商户号
微信商户平台账号:要认证、获取商户号(mch_id)、设置商户Api秘钥(mch_key)
APPID授权、配置支付接口
大致流程:
第一步:进入小程序,下单(用户点击了支付按钮后,就会向后台发送一个**请求下单的支付 **的请求)
第二步:请求下单的支付(这一步是后台接**收到请求下单的支付 **向微信服务器发送小程序登录的一个API请求,微信小程序后台收到请求后,返回给后台一个Openid)
第三步:后台生成商户订单( 在后台生成商户订单后,这个商户订单包括了:支付类型,金额,识别用户和商户信息,后台又将订单信息作为参数,调用微信后台的调用支付统一下单API方法,微信服务器处理后返回给后台预付单的信息)
第四步:将组合数据进行加密后返给前端,前端调用小程序支付方法
第五步:用户确认支付(接下来的一些列操作都是由用户来操作的包括了微信支付密码,指纹
等验证,确认支付之后执行鉴权调起支付)
第六步:鉴权调起支付(这一步没有与后台进行交互,直接在微信后台进行鉴权,微信后台直接返回给前端支付的结果,前端收到返回数据后对支付结果进行展示)
第七步:推送支付结果
小程序发布
注意事项:
小程序发布时,检查--本地设置--需要把“不校验合法域名的选项去掉打勾”,小程序使用的api和其他域名的资源,需要在小程序管理后台加上 白名单 配置。
上传--主包代码不超过2M ,分包代码不超过10M
小程序版本号:1.x.x 第一位数字代表大版本迭代 第二位数字代表功能性迭代,第三位数字代表修复bug和局部优化。
通过小程序开发者工具上传代码,点击“上传”按钮,填写版本号和描述,上传,上传成功后-->可以设置体验版和提交审核
小程序性能优化参考官网性能与体验-微信开放文档
一、启动性能
小程序启动是小程序用户体验中极为重要的一环,启动耗时过长会造成小程序用户流失,影响用户体验。
代码包体积优化
代码注入优化
首屏渲染优化
其他优化建议
除了 代码包体积、代码注入、首屏渲染之外,发版频率等因素也会影响小程序启动耗时。
二、运行时性能
合理使用setData
渲染性能优化
适当监听页面或组件的scroll事件
使用 IntersectionObserver 监听元素曝光
控制wxml节点数量和层级
一个太大的wxml节点树会增加内存的使用,样式重排事件也会更长,影响体验。
✅ 建议一个页面 WXML 节点数量应少于 1000 个,节点树深度少于 30 层,子节点数不大于 60 个。
控制在Page构造器时传入的自定义数据量
页面切换优化
资源加载优化
控制图片资源大小
避免滥用 image组件的 widthFix / heightFix
内存优化