凯的个人博客

微信小程序基础

5/28/2024 微信小程序

# 介绍：

张小龙：微信---飞信---小程序平台

小程序： 方便 占内存小 体验比较好----【不用下载，不用安装】 1个月--破亿

小游戏： 羊了个羊 跳一跳

微店：----店铺

微信公众号： h5页面

小程序： 微信 qq 支付宝 百度 抖音 头条 京东

# 整理文档连接：

https://www.gotang.cn/pages/97d274
1

# 1.注册账号+添加小程序

注册账号--认证

添加小程序-基础信息填写---appId ： wx5484e4642189d850

# 2.创建项目

  • 创建项目根目录 命名无特殊要求

  • 微信开发者工具

# 4.页面级组件介绍

一个页面 有 四个部分组成

index.wxml ==== index.html (div 不支持)

index.wxss ====index.css

index.js === 业务逻辑 (vue SFC <script> </script>)

index.json ===当前页面的 配置项（如果当前页面的配置 与 全局的配置 属性名一致，全局配置这个属性就失效了）

  • 创建 pages/index 目录 ---鼠标 右键 这个目录 ---创建页面

# 5.关于 rpx 单位

rem+px

rem 动态更改 px 缩放比例 rem+flexible.js

如果屏幕变大 rpx 单位 会自动放大 ，反之自动缩小

转换 比例： 1px = 2rpx 【手机屏幕 375宽度 设计图375px 】

铺满全屏： 375px ====750rpx

/* pages/index/index.wxss */
.box{
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(to right bottom,#f60,#f44);
  color: #fff;
  text-align: center;
  line-height: 100rpx;
  font-weight: 700;
  margin-top: 200rpx;
  font-size: 32rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12

# 6.关于 页面级组件的js代码

Page({
    //数据定义
    data:{
        
    },
    
    //方法的定义 
    getUserInfo(){
        this.login()
    },
    login(){
        
    }
    
    //生命周期
   /**
   * 生命周期函数--监听页面加载--进入页面【多---created】
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成--【mounted】
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示--进入页面触发
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏--关闭了
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载--【destroyed 】
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作--加载loading 效果，且重新获取数据-渲染页面
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数---获取分页数据加载---【数据 懒加载】
   */
  onReachBottom() {  
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
    
    
    
    
    
    
    
    
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 7.data 与 mustach {{}}

Page({
    data:{
        name:'张麻子',
        h:100,
        w:150,
        
        money:10000
    }
})
1
2
3
4
5
6
7
8
9
<view  money="{{money}}" style="width: {{w}}px;height: {{h}}px;"> 
  {{name}}
</view>
1
2
3

# 8.data 的双向绑定-数据驱动

微信的data对象 是没有 响应式，最小粒度更新 this.setData({}) //传入的对象 用来覆盖 已经存在的data数据

  data: {
     name:'张麻子',
     money:1000,
     w:100,
     h:100,
     num:0,
     obj:{
       arr:[100,200]
     }
  },
  add(){
    //获取data 数据
    console.log(this.data.num);
    let xxx = this.data.num+1;
    this.data.obj.arr[0]++;

    // 最小粒度更新
    // 覆盖原值
    this.setData({
      num:xxx,
      obj: this.data.obj
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<view>
  {{num}}---{{obj.arr[0]}}
</view>
<button type="primary" bindtap="add"> 点击 +</button>
1
2
3
4

# 9.data数据的异步更新 nextTick

如果出现了 使用setData 仍然 达不到 数据和页面的双向绑定，很有可能就是代码中 存在着异步代码

获取用户个人信息（发送请求） 获取小程序权限列表 获取小程序 的手机屏幕信息

wx.nextTick(()=>{
   this.setData({
    num:1000
   })
})
1
2
3
4
5

# 10.实现类似 v-model 的效果-真正的双向绑定

<input  id="100" data-num="1000" value="{{name}}" bindinput="changeData">  </input>
<view>
  {{name}}
</view>
1
2
3
4
 data: {
    name:'张麻子'
  },
//事件触发 wx中执行函数 都会自动获得 对象  event:事件对象
  changeData(event){
  	console.log(event.detail.value);  //获取value值 
    console.log(event.target.dataset.num)  //获取自定义数据
     console.log(event.target.id)  //获取id
    //  拿到最新的input的数据 覆盖 data里面变量数据:实现类似的 v-model
    this.setData({
      name:event.detail.value
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13

# 10.事件绑定

微信小程序 所有的事件

bind事件类型="执行函数"

类型 触发条件 最低版本
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开 *
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 [1.5.0] *
longtap 手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发 [1.9.90]
change input的改变事件
input input 的输入事件
submit form表单事件，submit 事件中返回组件的字段名及其对应字段值,表单元素必须有：name和value属性 *
<form  bindsubmit="save">
    <input type="text" name="name" value=""  placeholder="请输入姓名"/>
    <input type="text" name="age" value=""  placeholder="请输入年龄"/>
    <input type="text" name="doc" value=""  placeholder="预约的医生"/>
    <button form-type="submit" type="primary">提交</button>
</form>
1
2
3
4
5
6
save(event){
  console.log(event.detail.value);  // {name:'xx',age:'xx',doc:'xxx'}
},
1
2
3

# 11.指令系统

wx:指令=“”

# 1.wx:for 循环指令

wx:for =“NaN”

data:{
    arr:[100,200,300]
}
1
2
3
<view wx:for="{{arr}}" wx:key="index">
   {{index}}---{{item}}
</view>
1
2
3
data:{
	arr1:[[100,200],[300,400]]
}
1
2
3
<view wx:for="{{arr1}}" wx:for-index="index"   wx:for-item="item"  wx:key="index" >
  <view wx:for="{{item}}" wx:for-index="index1" wx:for-item="item1" wx:key="index1"> 
      {{item1}}
  </view>
</view>
1
2
3
4
5

# 2.wx:if wx:elif wx:else 判断指令

wx:if="true" true=== 新增dom false===删除dom

<view wx:if="{{condition}}"> True </view>
1
<view wx:if="{{num > 5}}"> 1 </view>
<view wx:elif="{{num > 2}}"> 2 </view>
<view wx:else> 3 </view>
1
2
3

# 3. hidden 隐藏属性

hidden=“true” true==隐藏 false==不隐藏 操作：cssdisplay:none

<view hidden="{{show}}">    
  我是显隐内容
</view>
1
2
3

# 12. tabBar 底部配置--【路由】

全局配置：所有的页面 都使用这个 tabBar app.json

单个页面配置：如果再单个页面 配置了 改 底部样式 会覆盖全局配置 home.json

  • 创建4个页面

home discounts shop mine

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
1
 "pages": [
        "pages/home/home",
        "pages/discounts/discounts",
        "pages/shop/shop",
        "pages/mine/mine"
    ],
  "tabBar": {
        "selectedColor": "#e27662",
        "list": [{
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "./imgs/home.png",
                "selectedIconPath": "./imgs/home_active.png"
            },
            {
                "pagePath": "pages/discounts/discounts",
                "text": "找优惠",
                "iconPath": "./imgs/discount.png",
                "selectedIconPath": "./imgs/discount_active.png"
            },
            {
                "pagePath": "pages/shop/shop",
                "text": "找好店",
                "iconPath": "./imgs/shop.png",
                "selectedIconPath": "./imgs/shop_active.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "./imgs/mine.png",
                "selectedIconPath": "./imgs/mine_active.png"
            }
        ]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  • 页面跳转
     wx.navigateTo({
          url:  "../goods/goods"
        })
1
2
3

# 13.navigation 顶部配置

全局配置：所有的页面 都使用这个 window app.json

单个页面配置：如果再单个页面 配置了 改 底部样式 会覆盖全局配置 home.json

组件 定义 组件传值 自定义顶部 自定义底部

微信小程序进阶