【无标题】

最新推荐文章于 2024-09-30 14:06:00 发布

lmyhyx

最新推荐文章于 2024-09-30 14:06:00 发布

阅读量459

点赞数 9

文章标签：微信小程序

本文链接：https://blog.csdn.net/lmyhyx/article/details/139971079

版权

配置文件

app.json

pages 存放项目的页面
哪个页面在最前面，哪个页面是默认页面

window 项目的窗口
"backgroundTextStyle": "light", 背景文字:light|dark
"navigationBarBackgroundColor": "#000", 导航栏背景颜色
"navigationBarTitleText": "BLACK", 导航栏标题
"navigationBarTextStyle": "white" 导航栏文字颜色:white|black

  "tabBar": {
    "color": "#484848",
    "selectedColor": "#109fef",
    "list": [{
      "pagePath": "pages/base/base",
      "text": "语法",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-h.png"
    }]
  },

color 文字默认颜色
selectedColor 文字选中颜色
list 页面列表：

        pagePath 页面地址
        text 文本
        iconPath 图标地址
        selectedIconPath 选中图标地址

页面.json

"usingComponents": {} 使用组件

"navigationBarTitleText": "基础语法" 标题

"enablePullDownRefresh": true 允许下拉刷新

"backgroundColor": "#eee" 背景颜色

"backgroundTextStyle": "dark" 背景文字颜色

小程序内置组件

<view> 逻辑视觉分区(div)
<text> 文本(span)
user-select="true" 用户长按可选择

<image> 图片组件
src 图片地址
mode 模式：

scaleToFill:不保持宽高比,缩放
aspectFit:保持宽高比,长边优先
aspectFill:保持宽高比,短边优先
widthFix:宽不变,高自动
heightFix:高不变,宽自动
left right top bottom center:显示局部
<input>
value 值

placeholder 提示文本

password="true" 密码框

type 弹出不同键盘：

text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘
safe-password 密码安全输入键盘指引
nickname 昵称输入键盘
confirm-type 键盘右下角案例

send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”
<button> 按钮
type 颜色类型

primary 绿色
default 白色
warn 红色
size="mini" 行内小按钮

<switch> 切换
color 颜色

type="checkbox" 选择框

<picker> 选择
header-text 标题文本

mode：

times 事件
date 日期
region 省市区
<icon> 图标
type：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size="100" 单位为px

<scroll-view> 滚动区域
scroll-x 水平

scroll-y 垂直

<swiper> <swiper-item> 幻灯片
indicator-dots="true" 是否显示提示点

autoplay="true" 自动播放

circular="true" 衔接滑动

模板语法

条件渲染
wx:if="{{条件}}"

多重条件渲染
wx:elif="{{多重条件}}"
wx:else

文本渲染
{{}}

placeholder="{{msg}}" 属性的渲染

列表渲染
<view wx:for="{{list}}" wx:key="index">{{index}}.{{item}}</view>
自定义列表渲染
多层for循环定义名称

<view wx:for="{{list}}" 
        wx:for-item="myitem" wx:for-index="myindex" 
        wx:key="myindex"
>
{{myindex}}.{{myitem}}
</view>

<template> 模板
定义:

<template name="user">
<view>用户名：{{name}}</view>
</template>
导入：只能导入template

<import src="..."></import>
使用：

<template is="user" data="{{name:'mewow'}}"></template>
<include> 引入
<include src="..."></include>
相当于把src的内容拷贝一份放在当前位置，不能导入template

事件

事件方法
bindTap 点击

bindconfim 确认

bindchange 表单值发生变化

bindinput 表单输入

普通事件
调用方法：

<button bindTap="showMsg">事件</button>
自定义方法：

showMsg(){}
事件传参
定义参数：

<button bindtap="showMsg" data-msg="小程序">小程序</button>
在方法中获取参数：

showMsg(e){
  let msg=e.currentTarget.dataset.msg;
  wx.showToast({
    title: 'hello '+msg,
    icon:"loading"
  })
}

表单双向绑定
表单：

<input type="text" value="{{msg}}" bindinput="changeHd"/>
定义方法更新视图和data：

changeHd(e){
let msg=e.detail.value;
this.setData({msg})
}

data与更新

js方法里data数据：this.data.msg

在wxml使用：{{msg}}

更新data与视图：this.setData({key1:value1,key2:value2})

注意：this指向,在wx.xxx api里面this的wx这个对象不是当前页面

微信api

Page参数
data 存储数据

onload() 当页面加载中

onPullDownRefresh 下拉刷新回调函数

onReachBottom 触底回调函数

wx.xxx
wx.stopPullDownRefresh(); 停止下拉刷新

wx.showToast({}) 轻提示

wx.request({url,method,success(){}}) 网络请求：

默认请求地址需要在后端配置
默认请求地址要求https

事件绑定

条件渲染

1. block包裹性容器：条件成立渲染

<block wx:if="{{ true }}">
 
<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

2. wx:if：动态创建移除元素控制展示与隐藏

 wx:if 搭配 wx:elif 、 wx:else 
 
data:    type:2
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

3. hidden：控制展示与隐藏

<view hidden="{{flag}}">true隐藏，false显示</view>

4. wx:if 和 hidden对比

wx:if 
动态创建和移除元素，控制元素展示 / 隐藏
场景：控制条件复杂时使用
 
hidden
切换样式控制展示与隐藏，节点一直存在
场景：频繁切换

列表渲染

1. wx:for 指定数组，进行循环渲染
2. wx:for-index 手动指定索引名
3. wx:for-item 手动指定当前项名
4. wx:key="id" 提高渲染效率

data: {  arr1: ['苹果','华为','小米']  }
<view wx:for="{{ arr1 }}"  wx:key="id">
      索引是 {{ index }} 当前项是： {{ item }}
</view>
 
<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="m">
      索引是 {{ i }} 当前项是： {{ m }}
</view>

模板样式：rpx

布局使用 flex 布局，尺寸单位使用 rpx
( responsive pixel )是微信小程序独有的，用来解决屏适配的尺寸单位。

实现原理：不同设备屏幕的大小不同，实现屏幕的自动适配， rpx 把所有设备的屏幕，在宽度上等分为 750 份, 1份就是1 rpx 。较小(大)的设备上，1 rpx 所代表的宽度较小(大)。

全局配置文件 app.json 及常用的配置项

1 pages：当前小程序所有页面存放路径

2 window：窗口外观

导航栏；背景区；页面主体区：
"navigationBarTitleText": "导航栏显示的标题",  
"navigationBarBackgroundColor": "#fff",  导航栏背景色:16进制
"navigationBarTextStyle":"black", 导航栏标题颜色: black/white
"backgroundTextStyle":"light",  下拉loading的样式 dark/light
"backgroundColor": "#efefef",  下拉窗口的背景色
"enablePullDownRefresh": true,  开启下拉刷新
"onReachBottomDistance": 50  上拉触底的距离,获取下页数据

3 tabBar：底部效果

backgroundColor ： tabBar背景色
borderStyle：上边框的颜色
selectedColor：选中时文字的颜色
color：未选中颜色
 
"tabBar":{  // 与window同级
  "list":[{
     "pagePath":"页面路径",
     "text":"底部文字",
     "iconPath":"未激活图标地址",
     "selectedIconPath":"激活图标地址"
},{},....]},

4 style：是否启用新版组件样式

局部样式：当前页面配置json文件，会覆盖全局的配置

自定义组件

1 创建和引用

根目录中 -> 创建components -> test 文件夹 -> 新建 Component -> 回车

局部引用：页面的 .json 文件中引用组件
全局引用：app.json 全局配置文件中引用组件
"usingComponents": {"my-test": "/components/test/test"}
my-test 就是组件使用时的标签名：<my-test></my-test>

2 组件和页面的区别

组件的.json 中需要声明 "component": true,
组件的.js调用函数Component，页面是Page
组件事件处理函数需定义在methods，页面在Page下

3 组件样式隔离

每个组件和页面样式之间不会影响，全局样式对组件无效，只有 class 选择器会有样式隔离效果

修改组件的样式隔离选项：
Component({
   options: { styleIsolation: 'isolated'}
})
 
isolated启用隔离不会影响；
apply-shared页面样式可改变组件；
shared相互影响；

4 属性

properties：对外属性，接收外界传递到组件的数据
properties: {
    max: { type: Number, value: 10 },  // 完整写法
    min: Number   // 简化
},
 
data 和 properties 区别？  都可读可写
data 是组件私有数据，properties是外界传入的数据

5 数据监听器：observers

Components({
 observers: {
   '字段A， 字段B': function(A的新值， B的新值) {}
})
 
监听个别属性
'rgb.r, rgb.g, rgb.b': function (r, g, b){
  this.setData({
   fullColor: `${r}, ${g}, ${b}`  
  })
}
 
通配符监听对象的所有属性
'rgb.**': function (obj){
  this.setData({
   fullColor: `${obj.r}, ${obj.g}, ${obj.b}`  
  })
}

6 纯数据字段

不用于页面渲染的data字段，用于业务逻辑，有助于提升页面更新的性能

使用：
Component 构造器的 options 节点中，指定 pureDataPattern 为一个 正则表达式
Component({
  options: {  pureDataPattern: /^_/  },
  data: {   _b: true // 纯数据字段  }
})

7 生命周期函数

组件生命周期定义，在lifetimes 字段内：
lifetimes: { 
    created(){ },
    attached() { }
}
 
组件所在页面生命周期，定义在 pageLifetimes 节点：
Component({
   pageLifetimes: {
     show:  function () {  },       // 页面被展示
     hide:  function () {  },       // 页面被隐藏
     resize:  function (size) {  }  // 页面尺寸变化
}})
 
created： 监听组件实例被创建；(用于给组件的 this 添加自定义的属性)
attached：监听组件初始化完毕 / 进入页面节点树；(发请求获取初始数据)
ready：监听组件在视图层布局完成；(可操作页面)
moved：监听组件实例被移动到节点树另个位置；
detached：监听组件实例从页面节点树被移除；(清除定时器)
error：监听组件方法抛出错误；

8 插槽

<!-- 组件的封装者 -->
<view>
  <view>这里是组件的内部结构</view>
  <!-- 封装组件的时候，使用slot进行占位 -->
  <slot></slot>
</view>
 
<!-- 组件的使用者 -->
<my-test4>
  <!-- 使用组件的时候，这部分被放在slot中 -->
  <view>通过插槽填充的内容</view>
</my-test4>

启用 多个插槽
Component({
  options: {
    multipleSolts: true
  }
})
 
 
定义 多个插槽：
<view class="wrapper">
   <slot name="before"></slot>
   <slot name="after"></slot>
</view>
 
<my-test4>
  <view slot="before">1111</view>
  <view slot="after">2222</view>
</my-test4>

组件通讯

1. 属性绑定：只能传递数据，不能传递方法

父组件：定义->传出
     data: {count: 0}
     <my-test5 count="{{count}}">111</my-test5>
子组件接收：properties: {count: Number}

2. 事件绑定：子组件向父组件传递任意数据

父组件js中定义函数，通过父组件wxml自定义事件传给子组件
子组件js中，通过this.triggerEvent('自定义事件名',{ /*参数对象*/})
将数据发送到父组件，父组件js中通过e.detail获取子组件传的数据
 
 
syncCount(){}
 
<my-test5 count="{{count}}" bind:sync="syncCount"></my-test5>
 
this.triggerEvent('sync',{value:this.properties.count+1})
 
syncCount(e){
    this.setData({
      count: e.detail.value
})}

3. 获取组件实例

父组件通过 this.selectComponent() 获取子组件实例对象，访问子组件的数据和方法;
给子组件添加类或id -> 父组件绑定事件获取实例
 
<my-test5 class="customA" ... ... ></my-test5>
 
<button bindtap="getChild">获取组件实例</button>
 
getChild() {
     const child = this.selectComponent('.customA')
}