微信小程序学习_微信小程序css通配符-优快云博客

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);
  }
})