微信小程序学习

sun_jinlin

已于 2023-03-02 11:15:22 修改

阅读量673

点赞数

分类专栏：小程序微信小程序文章标签：微信小程序小程序 Powered by 金山文档

于 2023-02-23 00:23:20 首次发布

本文链接：https://blog.csdn.net/sun_jinlin/article/details/129173178

版权

小程序同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

微信小程序

2 篇文章 0 订阅

订阅专栏

小程序项目-搭建

一、小程序的第三方框架(项目选型)

腾讯 wepy

美团mpvue

京东 taro[https://taro-docs.jd.com/docs]

滴滴 chameleon

uni-app

二、帮助文档

小程序开发文档

阿里巴巴字体图标 iconfont

三、项目搭建

新建小程序项目

输入自己的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);
  }
})