WechatMini Program

Publish Date: 2021-01-13

JavaScript脚本

小程序的中 JavaScript同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的

js模块化

每一个JS文件对应一个模块，这样子的话，每个模块之间的参数或方法互相独立，但也支持特定方式的的调用

例子：在index.js中访问nav_top.js中的文件

但是我们还是无法直接访问nav_top中的方法，因为nav_top并没有对外暴露任何接口，所以我们还需要在nav_top中使用experts命令把我们想暴露的接口说明一下：

脚本执行顺序

小程序中的脚本执行顺序与HTML有所不同。小程序的执行的入口文件是 app.js 。并且会根据其中 require 的模块顺序决定文件的运行顺序

当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行

全局变量

spp.js中全局变量设置，别的文件先 const app = getApp() 再取值

小程序事件

事件类型	触发条件
touchstart	手指触摸动作开始触发
touchmove	手指触摸后移动触发
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发（与tap同时定义，优先级更高）
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发

事件对象

在事件处理函数中，我们能接受到一个event对象参数，该参数包含了当前事件类型，以及当前组件相关信息，具体属性如下：

属性	类型	说明
type	String	当前绑定的事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

<button bindtap="alert" id="btn" data-name="dataNames" data-age="27">bindtap</button>
///js
Page({
  data: {},
  alert: function (event) {
    console.log(event);
  }
})

事件分类

冒泡事件
a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
b) 冒泡事件列表
非冒泡事件
a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。
b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

绑定事件

bind 绑定：事件绑定不会阻止冒泡事件向上冒泡
catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

<view bindtap='handleTap' class='start_container'>
 <text class='start'>开启小程序之旅</text>
</view> 

<view catchtap="handleTap" class='start_container'>
 <text class='start'>开启小程序之旅</text>
</view>

向事件对象传参

语法： data-key=value
获取: event.target.dataset.key || event.currentTarget.dataset.key

Event.target 和 event.currentTarget 的区别

a) Event.target 是触发事件的对象，但不一样是绑定事件的对象，如：事件委托，冒泡
b) currentTarget 触发时间的对象一定是绑定事件的对象，没有事件委托

也就是：
如果你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，所以currentTarget 、target 都可以拿到参数，但是当你点击子元素时，target 就不是事件绑定的组件了，所以拿不到参数。
由于事件冒泡的机制，父容器上绑定的事件依然可以触发，所以currentTarget 依然可以拿到参数。

传多个参数 vs 传一个参数

传递的数据比较多，通过dataset携带参数信息。如果只有一个参数，可以通过id来传递。

<button bindtap='clickMe' data-id='1'>点击</button>

clickMe:function(e){
  var id = e.currentTarget.dataset.id//这里用target也可以
  console.log(id);
},

<button bindtap='clickMe' id='1'>点击</button>

clickMe:function(e){
  var id = e.currentTarget.id//这里用target也可以
  console.log(id);
},

其他传参：网页url直接携带（onload提取），表单提交，app.js全局变量

捕获与冒泡阶段

bind前缀就表示事件在冒泡阶段执行，而如果我们想事件在捕获阶段执行，可以在bind前面加上capture，即capture-bind表示捕获阶段执行

bind不会阻止冒泡，添加capture前缀可以响应捕获阶段。

例子

<view id="parent"
  bind:tap="tap1"
  capture-bind:tap="tap2">
  outer view
  <view id="child"
    bind:tap="tap3"
    capture-bind:tap="tap4">
    inner view
  </view>
</view>

///js
Page({
  data: {},
  tap1: function (event) {
    console.log('tap1');
  },
  tap2: function (event) {
    console.log('tap2');
  },
  tap3: function (event) {
    console.log('tap3');
  },
  tap4: function (event) {
    console.log('tap4');
  },
})

结果是 2-4-3-1

阻止冒泡

将bind替换为catch事件了，catch也支持两种写法catch与catch:

例子 - 只显示子区域

<view
  id="parent"
  catch:tap="tap1"
>
  outer view
  <view
    id="child"
    catch:tap="tap3"
  >
    inner view
  </view>
</view>

结果 - 3

<view
  id="parent"
  bind:tap="tap1"
  capture-catch:tap="tap2"
>
  outer view
  <view
    id="child"
    bind:tap="tap3"
    capture-catch:tap="tap4"
  >
    inner view
  </view>
</view>

结果： 2

我们将capture-bind都改为capture-catch，可以发现不管点击父区域还是子区域，都只会输出一个tap2，这是因为capture-catch会中断捕获阶段和取消冒泡阶段。所以不管点击哪，都是从捕获阶段开始，先捕获到父，然后中断捕获，也不会存在冒泡了

bind不会阻止冒泡，但如果想抓捕获阶段，可以添加前缀capture，也就是capture-bind。

catch会阻止冒泡，如果添加capture前缀，捕获阶段会中断的同时，也会阻止冒泡。

tabBar

//app.json sample
"tabBar": {
    "list": [
      { "text": "Tab1", "pagePath": "pageA" },
      { "text": "Tab1", "pagePath": "pageF" },
      { "text": "Tab1", "pagePath": "pageG" }
    ]
  }

//例子
 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_speed.png",
       "selectedIconPath":"images/icon_speed_HL.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
       "iconPath": "images/icon_seo.png",
       "selectedIconPath":"images/icon_seo_HL.png"
    }]
  }

button的触发事件

官方有给出非常多的互动事件，多数好用而且不用自己写。（简单的有 loading效果摁住多少秒；强大的有客服消息回调打开授权设置页后回调等等…(*￣０￣ *)ノ）
可以多多探索 https://developers.weixin.qq.com/miniprogram/dev/component/button.html

open-type （重点）

getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息

微信小程序正则

验证数字：^[0-9]*$ 
验证n位的数字：^\d{n}$ 
验证至少n位数字：^\d{n,}$ 
验证m-n位的数字：^\d{m,n}$ 
验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 
验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 
验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 
验证非零的正整数：^+?[1-9][0-9]*$ 
验证非零的负整数：^-[1-9][0-9]*$ 
验证非负整数（正整数 + 0） ^\d+$ 
验证非正整数（负整数 + 0） ^((-\d+)|(0+))$ 
验证长度为3的字符：^.{3}$ 
验证由26个英文字母组成的字符串：^[A-Za-z]+$ 
验证由26个大写英文字母组成的字符串：^[A-Z]+$ 
验证由26个小写英文字母组成的字符串：^[a-z]+$ 
验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$ 
验证由数字、26个英文字母或者下划线组成的字符串：^\w+$ 
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。 
验证是否含有 ^%&',;=?$" 等字符：[^%&',;=?$\x22]+ 
验证汉字：^[\u4e00-\u9fa5],{0,}$ 
验证Email地址：/^([a-zA-Z0-9]+[_|_|.]?)[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/
验证InternetURL：^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$ ；^[a-zA-z]+://(w+(-w+))(.(w+(-w+)))(?S*)?$ 
验证电话号码：^(\d3,4\d3,4|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。(貌似有点问题)
验证身份证号（15位或18位数字）：^\d{15}|\d{}18$ 
验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12” 
验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。 
整数：^-?\d+$ 
非负浮点数（正浮点数 + 0）：^\d+(.\d+)?$ 
正浮点数 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$ 
非正浮点数（负浮点数 + 0） ^((-\d+(.\d+)?)|(0+(.0+)?))$ 
负浮点数 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$ 
浮点数 ^(-?\d+)(.\d+)?$

if (!(/^[\u4E00-\u9FA5A-Za-z]+$/.test(你要验证的姓名))) {
wx.showToast({
title: '姓名有误',
duration: 2000,
icon: true
});
}
//另外一种
  if(!names.test(username)||!phonetel.test(username)||!emailnums.test(username)){
      wx.showModal({
        title:'错误提示',
        content:'请输入正常的用户名/手机号/邮箱地址',
        showCancel:false
      }) 
    }

不同的页面不同title

1.首先判断对应的 .json文件是否设置 navigationBarTitleText

2.如果存在请删除对应属性设置，然后进行Title设置

 wx.setNavigationBarTitle({
        title: '你的顶部Title写这里即可'
      })

radio 大小控制

    radio {      transform:scale(0.7);    }
/*<radio color="red">*/

image 控制大小

利用mode
定好width height

<!-- 基本的显示 -->
<image class="detailImg" src="../../img/share.png"></image>

<!-- 选择性显示 -->
<image src="{{isPlayMusic?'1.png':'2.png'}}">

<view>
   <image catch:tap="handleClickShow" wx:if="{{isShow}}" src="sc1.png" />
   <image catch:tap="handleClickShow" wx:else src="sc2.png" />
</view>

轮播图

<swiper>以及<scroll-view> 的选择上，<swiper>是滑动是一滑一个，</scroll-view>会滑动更多

练习

<swiper
 indicator-dots="true"
 autoplay="true"
 interval="2000"
>
    <swiper-item>
        <image src="../../images/banner1.png"></image>
    </swiper-item>
    <swiper-item>
        <image src="../../images/banner2.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="../../images/banner3.png"></image>t
    </swiper-item>
</swiper>

swiper {
  width: 100%;
  height: 500rpx;
}
swiper image {
  width: 100%;
  height: 500rpx;
}

微信小程序 scroll-view 滚动视图

<!-- 一定不要忘记enable-flex-->
<scroll-view
     class="albumScroll"
     enable-flex
     scroll-x
     bindscroll="scroll"
    >
        <!--此处重复多个 -->
        <view
         class="album"
         hover-class="none"
         hover-stop-propagation="false"
        >
            <image
             src="../../images/icon_head.png"
             lazy-load="false"
             binderror=""
             bindload=""
            >
            </image>
            <text selectable="false" space="false" decode="false">
                专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍专辑介绍
            </text>
        </view> 
    </scroll-view>

.albumScroll{
  display: flex;
  white-space: nowrap; /*文字长也不换行*/
}
.album{
  width: 120rpx;
  display: flex;
  flex-direction: column;
  margin-right: 30rpx;
}
.album > image{
  width: 120rpx; 
  height: 120rpx;
}
.album > text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  text-overflow:ellipsis;/*这行以上必要*/
  font-size: x-small;
}

如果想用swiper弄出前后都可以一直转动的

文字省略显示（文字溢出隐藏）

文字显示三行

.note_item text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    text-overflow:ellipsis;/*这行以上必要*/
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    word-break: break-all;/*选择*/
    word-wrap: break-word; 
    white-space: normal !important;
}

文字显示单行

.note2_item text{
    display: block;/*重要的*/
    overflow: hidden;
    white-space: nowrap;/* 换行不显示*/
    text-overflow:ellipsis;/*这行以上必要*/
    font-size:28rpx;
    color:#000000;
    line-height: 40rpx;
    height: 120rpx;
}

其他例子

text{
  display: inline-block; 
  width: 400rpx;
  border: 1rpx solid gray;
  margin: 30rpx 60rpx;
  display: -webkit-box ;
  overflow: hidden; /*隐藏溢出的文本  */
  text-overflow: ellipsis;
  word-break: break-all;/*自动换行*/
  -moz-box-orient: vertical; /*从上到下自动排列子元素*/
  -webkit-box-orient: vertical; 
  -webkit-line-clamp:2; /*显示的行数*/
}

将height设置为line-height的整数倍，防止超出的文字露出

微信自带常用API

界面交互
a) 显示消息提示框: wx.showToast()

 title          ----------------     标题，要显示的提示信息
 icon         ----------------     图标，只支持"success"、"loading"
 image     ----------------     自定义图标的本地路径，image的优先级高于icon
 duration  ----------------     提示的延迟时间，单位毫秒，默认：1500
 mask       ----------------     是否显示透明蒙层，防止触摸穿透，默认：false

b) 显示消息加载框: wx.showLoading()
c) 关闭消息提示框: wx.hideToast()
d) 关闭消息加载框: wx.hideLoading()

路由跳转
a) wx.navigateTo()
b) wx.redirectTo()
c) wx.switchTab()
网络请求
a) wx.request()
本地存储
a) wx.setStorage()
b) wx.setStorageSync()
c) wx.getStorage()
d) wx.getStorageSync()
媒体
a) wx.getBackgroundAudioManager()
b) wx.playVoice()

API查询

微信小程序开发文档 https://www.w3cschool.cn/weixinapp/

程序本地存储

存入数据
a) wx.setStorage() 异步
b) wx.setStorageSync() 同步
```
wx.setstorage({
 key:"key",
 data:"value"
})
```

读取数据
a) wx.getStorage()异步
b) wx.getStorageSync() 同步

wx.getstorage({
 key:"key",
 success(res){
     console.log(res.data)
 }
})

删除数据
a) wx.removeStorage() 异步
b) wx.removeStroageSync() 同步

wx.removeStorage({
 key:"key",
 success(res){
     console.log(res)
 }
})

清空数据
a) wx.clearStorage() 异步
b) wx.clearStorageSync() 同步
```
wx.clearStorage()
```

Reference

小程序学习笔记

小程序冒泡事件讲解

Savannah

http://savancode.github.io

All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Savannah !

WechatMini Program

Wechat-mini-prog-03 网络请求

网络- 前后端交互语法 - wx.request() 服务器域名请在「小程序后台-开发-开发设置-服务器域名」中进行配置默认超时时间和最大超时时间都是 60s 超时时间可以在 app.json 中通过 networktimeou

2021-01-13 WechatMini Program

WechatMini Program

Wechat-mini-prog-01 微信小程序基础1

小程序架构分析

2021-01-12 WechatMini Program

WechatMini Program

Wechat-mini-prog-02 微信小程序基础2

JavaScript脚本

js模块化

例子：在index.js中访问nav_top.js中的文件

脚本执行顺序

全局变量

小程序事件

事件对象

事件分类

绑定事件

向事件对象传参

Event.target 和 event.currentTarget 的区别

传多个参数 vs 传一个参数

捕获与冒泡阶段

例子

阻止冒泡

例子 - 只显示子区域

button的触发事件

open-type （重点）

微信小程序正则

不同的页面不同title

radio 大小控制

image 控制大小

轮播图

微信小程序 scroll-view 滚动视图

文字省略显示（文字溢出隐藏）

文字显示三行

文字显示单行

微信自带常用API

API查询

程序本地存储

Reference