img {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
具体参考 CSS3 filter(滤镜) 属性 | 菜鸟教程
一 样式
1 不支持通配符 *
app.wxss
/* 在微信小程序中 不支持 通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
padding: 0;
margin: 0;
box-sizing: border-box;
}2 支持变量
app.wxss
/*
主题颜色 通过变量来实现
1 less 中 存在 变量这个知识
2 原生的css和wxss也是支持 变量
*/
page{
/* 定义主题颜色 */
--themeColor:#eb4450;
/*
定义统一字体大小 假设设计稿 大小是 375px
1px= 2rpx
14px = 28rpx
*/
font-size: 28rpx;
}
.title {
color: var(--themeColor);
}3 icon图标
复制代码放在styles文件夹下面，iconfont.wxss.
@font-face {
font-family: "iconfont"; /* Project id 2900066 */
src: url('//at.alicdn.com/t/font_2900066_927m9srd99a.woff2?t=1635412501072') format('woff2'),
url('//at.alicdn.com/t/font_2900066_927m9srd99a.woff?t=1635412501072') format('woff'),
url('//at.alicdn.com/t/font_2900066_927m9srd99a.ttf?t=1635412501072') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-changyong_youhua:before {
content: "\e6ab";
}
.icon-changyong_zuohua:before {
content: "\e6ac";
}在app.wxss中引入：
@import "./styles/iconfont.wxss";4 本地字体包
微信小程序如果引入本地字体包，需要转化魏base64，转化地址Online @font-face generator — Transfonter
添加字体包: 例如iconfont.ttf文件
转化后下载下来，只需要引入stylesheet.css文件就可以
5 容器高度
.cates .cates_container {
/* less中使用calc的时候要注意 */
height: calc( 100vh - 90rpx );
display: flex;
}在less中使用要注意：
/* less中使用calc的时候要注意 */
.cates .cates_container {
height: ~'calc( 100vh - 90rpx )';
} 6 样式转化插件
在vscode中安装。在.less文件中编写，保存后自动转化并生产.wxss文件。
6 css3 filter属性
二 逻辑问题
1 图片选择和兼容
尽量使用webp格式得图片，体积小清晰度高。ios有些版本还不支持，不过大部分已经支持。
可以使得低版本的IE支持新的html元素
2 使用 async
es7的 async async 号称是解决回调的最终⽅案
1.在⼩程序的开发⼯具中，勾选es6转es5语法
2.下载facebook的regenerator库中的regenerator/packages/regenerator-runtime/runtime.js 3.在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js lib/runtime/runtime.js ，将代码拷⻉进去 4.在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）
import regeneratorRuntime from '../../lib/runtime/runtime';3 获取地址
获取 用户 对小程序 所授予 获取地址的 权限 状态 scope
1 假设 用户 点击获取收货地址的提示框 确定 authSetting scope.address
scope 值 true 直接调用 获取收货地址
2 假设 用户 从来没有调用过 收货地址的api
scope undefined 直接调用 获取收货地址
3 假设 用户 点击获取收货地址的提示框 取消
scope 值 false
1 诱导用户 自己 打开 授权设置页面(wx.openSetting) 当用户重新给与 获取地址权限的时候
2 获取收货地址
4 把获取到的收货地址 存入到 本地存储中
// 点击 收货地址
async handleChooseAddress() {
try {
// 1 获取 权限状态
const res1 = await getSetting();
const scopeAddress = res1.authSetting["scope.address"];
// 2 判断 权限状态
if (scopeAddress === false) {
await openSetting();
}
// 4 调用获取收货地址的 api
let address = await chooseAddress();
address.all = address.provinceName + address.cityName + address.countyName + address.detailInfo;
// 5 存入到缓存中
wx.setStorageSync("address", address);
} catch (error) {
console.log(error);
}
},4 登录授权获取token
在支付得时候需要带上token，所以在支付之前，用户需要先登录，流程大致如下：
1.获取⽤⼾信息 返回
encryptedData,rawData,iv,signature encryptedData,rawData,iv,signature2.⼩程序登录 wx.login 返回
code3.提交数据到⾃⼰的后台，执⾏post请求，提交数据
encryptedData,rawData,iv,signature code
4.将 token token 和⽤⼾数据 rawData rawData 存⼊本地存储
授权页面：
<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" >
获取授权
</button>import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
import { login } from "../../utils/asyncWx.js";
Page({
// 获取用户信息
async handleGetUserInfo(e) {
try {
// 1 获取用户信息
const { encryptedData, rawData, iv, signature } = e.detail;
// 2 获取小程序登录成功后的code
const { code } = await login();
const loginParams={ encryptedData, rawData, iv, signature ,code};
// 3 发送请求 获取用户的token
const {token}=await request({url:"/users/wxlogin",data:loginParams,method:"post"});
// 4 把token存入缓存中 同时跳转回上一个页面
wx.setStorageSync("token", token);
wx.navigateBack({
delta: 1
});
} catch (error) {
console.log(error);
}
}
})utils/asyncWx.js
/**
* promise 形式 getSetting
*/
export const getSetting=()=>{
return new Promise((resolve,reject)=>{
wx.getSetting({
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
/**
* promise 形式 chooseAddress
*/
export const chooseAddress=()=>{
return new Promise((resolve,reject)=>{
wx.chooseAddress({
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
/**
* promise 形式 openSetting
*/
export const openSetting=()=>{
return new Promise((resolve,reject)=>{
wx.openSetting({
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
/**
* promise 形式 showModal
* @param {object} param0 参数
*/
export const showModal=({content})=>{
return new Promise((resolve,reject)=>{
wx.showModal({
title: '提示',
content: content,
success :(res) =>{
resolve(res);
},
fail:(err)=>{
reject(err);
}
})
})
}
/**
* promise 形式 showToast
* @param {object} param0 参数
*/
export const showToast=({title})=>{
return new Promise((resolve,reject)=>{
wx.showToast({
title: title,
icon: 'none',
success :(res) =>{
resolve(res);
},
fail:(err)=>{
reject(err);
}
})
})
}
/**
* promise 形式 login
*/
export const login=()=>{
return new Promise((resolve,reject)=>{
wx.login({
timeout:10000,
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
});
})
}
/**
* promise 形式的 小程序的微信支付
* @param {object} pay 支付所必要的参数
*/
export const requestPayment=(pay)=>{
return new Promise((resolve,reject)=>{
wx.requestPayment({
...pay,
success: (result) => {
resolve(result)
},
fail: (err) => {
reject(err);
}
});
})
}
5 支付问题
必须是企业账号，才可以实现微信支付。一个企业账号可以添加多个开发者。
支付流程：
下面都是微信提供得接口：
示例：
支付页面：
// 点击 支付
async handleOrderPay() {
try {
// 1 判断缓存中有没有token
const token = wx.getStorageSync("token");
// 2 判断
if (!token) {
wx.navigateTo({
url: '/pages/auth/index'
});
return;
}
// 3 创建订单
// 3.1 准备 请求头参数
// const header = { Authorization: token };
// 3.2 准备 请求体参数
const order_price = this.data.totalPrice;
const consignee_addr = this.data.address.all;
const cart = this.data.cart;
let goods = [];
cart.forEach(v => goods.push({
goods_id: v.goods_id,
goods_number: v.num,
goods_price: v.goods_price
}))
const orderParams = { order_price, consignee_addr, goods };
// 4 准备发送请求 创建订单 获取订单编号
const { order_number } = await request({ url: "/my/orders/create", method: "POST", data: orderParams });
// 5 发起 预支付接口
const { pay } = await request({ url: "/my/orders/req_unifiedorder", method: "POST", data: { order_number } });
// 6 发起微信支付
await requestPayment(pay);
// 7 查询后台 订单状态
const res = await request({ url: "/my/orders/chkOrder", method: "POST", data: { order_number } });
await showToast({ title: "支付成功" });
// 8 手动删除缓存中 已经支付了的商品
let newCart=wx.getStorageSync("cart");
newCart=newCart.filter(v=>!v.checked);
wx.setStorageSync("cart", newCart);
// 8 支付成功了 跳转到订单页面
wx.navigateTo({
url: '/pages/order/index'
});
} catch (error) {
await showToast({ title: "支付失败" })
console.log(error);
}
}
})
6 请求接口得封装
// 同时发送异步代码的次数
let ajaxTimes=0;
export const request=(params)=>{
// 判断 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
});
// 定义公共的url
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.message);
},
fail:(err)=>{
reject(err);
},
complete:()=>{
ajaxTimes--;
if(ajaxTimes===0){
// 关闭正在等待的图标
wx.hideLoading();
}
}
});
})
}
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
