微信小程序

小程序

小程序的模块语法

文本渲染

{{msg}}

条件渲染

wx:if=""

wx:elif=""

wx:else

列表渲染

wx:for="{{list}}" {{item}}{{index}}

wx:key="index"

自定义列表渲染

定义item与index的名称

wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"

导入（不常用）

import

只能导入template内容

template/utils.wxml

<template name="userCart">
  用户名：{{name}}
</temlate>

home.wxml

include

只能导入非template内容

template/foot.wxml

home.wxml

页面组件

.wxml 模块文件

.js 业务逻辑

.wxss 样式

.json 页面配置

内置组件

view组件块组件

text组件行内组件

button组件按钮

input组件表单

wxss

默认单位是rpx

750rpx等于一个屏幕的宽

375就是50%的宽

事件

bindinput

表单输入时

bindconfirm

表单输入确认

bindtap

点击时候

事件的传参

<button data-msg="xxx" bindtap="tapHd"></button>

获取事件的参数

e.target.dataset.msg

表单的绑定

<input value="{{s1}}" bindinput="inputHd">

inputHd(e){

this.setData({s1:e.detail.value})

}

表单的值获取

e.detail.value

内置的api

显示提示 wx.showToast({})
本地存储 wx.setStorageSync(key,value)
本地取 wx.getStorageSync(key)
打开地图选择位置 wx.chooseLocation （{ }）
获取设备电量 wx.getBatteryInfoSync （{ }）
网络请求 wx.request（）

更新数据与试图

this.setData{{k:v}}

todo

设计数据
list存储数据

done:true,是否完成
title：”“显示的文本
}```

temp 和输入框进行双向绑定的临时数据

页面配置

"enablePullDownRetresh":true 允许下拉刷新
"backgroundTextStyle":"dark" 背景文字颜色
"backgroundColor":"#f70"背景颜色
"usingComponents":{}组件

小程序的限制

源文件的大小

每个包不能超过2M

总共不能超过16-20M

页面缓存堆栈5层

底部栏

最少2个最多5个

底部栏图片31K

本地存储

1次1M最多100M

setData

不能超过1M

功能和微信一致

小程序的页面跳转

组件跳转

url 跳转的地址

open-type 打开类型默认navigate 返回navigateBack 重定向 redirect 跳转底部栏switchTab 重启reLaunch

api跳转

wx.navigateTo 跳转
wx.switchTab 切换底部栏
wx.redirect 重定向
wx.reLaunch 重启

页面栈

最多存储ABCDE五个页面

通过open-type = "navigate"页面会缓存起来最多缓存5层

A页面->redirect B页面
A页面是不会被缓存

E 页面 "navigateBack" 到 D页面（页面的缓存移除一次）

总结：navigate会增加一层缓存页面
redirect 会替换一层缓存页面
navigateBack 会移除一层缓存页面

页面传参

小程序页面传参主要通过查询传参

传：url=“xxxx/xxx?name=mumu&age=18”

接收：onLoad option参数接收

options.name
options.age

全局数据

app.js的globalData

定义 app.js的globalData

页面使用 var app = getApp(); ``app.globalData.num

小程序的生命周期

封装request

定义baseURL
添加请求头
添加加载提示
错误处理

// 基础的url
const URL = {
  baseURL:"http://dida100.com"
}
// {name:"mumu",age:18} => name=mumu&age=18
function tansParams(obj){
var  str = "";
for(var k in obj){
str+=k+"="+obj[k]+"&";
}
//移除最后一个&
return str.slice(0,-1);
}
function request(option){
var url = option.url;
// 01 可以添加baseURL
// 是不是以http开头的，是用url不是加上baseURL
url = url.startsWith("http")?url:URL.baseURL+url;
// 选项里面有params（get传入的参数）
if(option.params){
// 如果有参数，把参数转换为url编码形式加入
url+="?"+tansParams(option.params);
 }
 
// 02 可以添加请求头
var  header = option.header||{};
header.Authorization ="Bearer "+wx.getStorageSync('token');
 
// 03 可以添加加载提示
if(option.loading){
wx.showToast({
  title: option.loading.title,
  icon:option.loading.icon,
})
}
// 返回一个promise
return new Promise((resolve,reject)=>{
  wx.request({
    // 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
    url: url,
    method:option.method||"GET",//请求的方法 默认get
    data:option.data, //post出入的参数
    header,
    success(res){
      // 请求成功
      resolve(res.data);
    },
    fail(err){
      // 04 对错误进行处理
      wx.showToast({title:"加载失败",icon:"none"})
      // 请求失败
      reject(err);
    },
    complete(){
      // 关闭加载提示
      wx.hideToast();
    }
  })
 })
} 
// 定义get简易方法
request.get= (url,config)=>{
 return request({url,method:"get",...config})
}
// 定义post简易方法
request.post= (url,data,config)=>{
return request({url,method:"post",data,...config})
}
// 导入request
module.exports={request}

tabBar

 "tabBar": {
    "list": [
      {
      "pagePath": "pages/yidian/yidian",//路径
      "text": "一点",//命名
      "iconPath": "/images/new.png",//默认图标
      "selectedIconPath": "/images/new-h.png"//别选中图标
    },
      {
      "pagePath": "pages/me/me",
      "text": "我的",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-h.png"
    }
  ]
  },

npm

1.初始化项目

2.安装插件

3.app.json删除v2

4.修改project.config.js

5.构建npm

6.导入组件

7.使用组件

自定义组件

组件的样式

options:{
//样式隔离:apply-shared 父影响子
	//	shared 父子相互影响
	//	isolated 相互隔离
stylelsolation:"isolated"
}

外部类

externalClasses:["cell-class"]

<view class="cell cell-class">我是cell组件</view>

页面中

<cell cell-class="mycell"></cell>

.mycell{
line-height:120px !important;
color:#f70;
}

组件的插槽

默认插槽

父组件

<cell>
<text>插槽内容</text>
</cell>

子组件

<view><slot></slot></view>

命名多插槽

父组件

<cell>
    <text slot="pre"> 🚒</text>
    <text slot="next">🥗</text>
</cell>

子组件

options:{ multipleSlots:true}

<view>
    <slot name="pre"></slot>
    <slot name="next"></slot>
</view>

组件的传参

父传子

property

子传父

triggerEvent

组件的使用

定义组件（js，wxml，json，wxss）

页面的 xxx.json
usingComponent 注册

"usingComponents": {
"cell":"/components/cell/cell",
"item":"/components/item/item"
}

自定义组件生命周期

组件的生命周期lifetimes

created 创建此时还不能调用setData

attached 挂载

detached 卸载

页面的生命周期pageLifetimes

show 显示

hide 后台运行

resize 尺寸变化

自定义导航栏

wx.getMenuButtonBoundingClientRect() 胶囊的边界

wx.getSysteminfoSync() 系统信息（状态栏的高度）

appid: "wx53b4d8f94b0cd189",

AppSecret: "b561babbd9ab316f2e1e308abc286bde"

登录功能

wx.login 获取code(不固定)
选做（getUserProfile）用户头像信息
发送给后端

3.1 通过code与appid和Appsecret向微信的服务器

换取用户唯一的openid

3.2通过openid鉴定用户（给予权限）返回前端信息

后端返回登录的状态，权限信息

登录总结

wx.login获取code
wx.request发送后端
前端存储后端返回登录状态
每次请求时候携带登录状态（封装在request.js）

提醒

单纯getUserProfile

不经过数据库与后端（没办法识别当前用户的）

支付功能

小程序支付，微信支付平台申请商家支付账号商户号与APPID进行绑定
用户下单 wx.login获取code 发给后端

2.1走一遍登录流程（确定是哪个用户购买)

2.2创建订单

2.3后端发送订单订单信息-给微信的服务器（换取一个预支付id)

2.4后端通过签名生成支付信息返回给前端
前端通过wx.requestPayment(后端返回的支付信息)发起
返回支付的结果

posted @ 2022-11-11 00:18 aureazjl 阅读(117) 评论(0) 收藏举报

刷新页面返回顶部

aureazjl