微信小程序学习

最新推荐文章于 2024-10-11 21:34:22 发布

xhw2333

最新推荐文章于 2024-10-11 21:34:22 发布

阅读量149

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/m0_46730406/article/details/113184327

版权

微信小程序学习

小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

目录结构

小技巧： 创建新页面时，在微信开发者工具中的app.json里添加文件路径，自动创建文件

tabBar

导航栏，在app.json里配置

mode值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域

block ----- 充当占位

swiper — 轮播图

swiper-item ---- 每一个轮播项
swiper的一些属性

属性	说明
autoplay	自动轮播
interval	轮播时间
circular	衔接轮播
indicator-dots	显示、指示器
indicator-color	指示器未选择的颜色
indicator-active-color	选中的时候的指示器的颜色

navigator ----- 相当于a标签，有url属性(指向的地址)，默认是不能跳转到有 tabBar导航组件 的页面，但可以让 open-type=“switchTab” 即可。

hidden和wx:if的区别

hidden：数据全部渲染，只是控制其隐藏或出现，频繁切换用hidden较好

wx:if：数据局部渲染,条件切换时会重新渲染

wx:for的嵌套使用

用wx:for-item,wx:for-index来区分

  <!-- 
List:[
	{
		title: '1',
		books:['book1','book2','book3'],
	},
	{
		title: '2',
		books:['book_a','book_b','book_c'],
	},
	{
		title: '3',
		books:['book_A','book_B','book_C'],
	},
]
-->
 <view wx:for="{{List}}" wx:for-item="item1" wx:for-index="index1" wx:key="title">
     <!-- 标题 -->
      <view class="title">
       {{item1.title}}
      </view>
      <!-- 内容 -->
      <view class="content">
        <view wx:for="{{item1.books}}" wx:for-item="item2" wx:for-index="index2" wx:key="*this">
        	{{item2}}
          </view>
      </view>
    </view>

自定义组件

在components新建组件名（简捷方法：在微信开发者工具右键新增组件）

引用组件在其要引用的.json文件里写上如下代码

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs" //名称 + 路径
  },
  "navigationBarTitleText": "组件开发"
}

父向子传值

属性名要对应好

父组件

<Tabs tabs="{{tabs}}" binditemChange="handleItem">
</Tabs>

子组件

properties: {
    //注册一下父组件传来的值
    tabs: {
      type:Array,
      //value默认值
      value: []
    }
  },

子向父传值

子组件

定义方法

//触发父组件的自定义事件，同时传递给它
this.triggerEvent("itemChange",{index});

在子组件的标签上加入一个自定义事件，这里是itemChange

<Tabs tabs="{{tabs}}" binditemChange="handleItem">
</Tabs>

父组件

handleItem(e){
    console.log(e);
    let {index} = e.detail; //拿子传来的索引
  },

slot

占位符、插槽，看父组件传递过来的东西，标签里传来即可

子组件

  <view class="tabs_contents">
    <!-- slot标签 一个占位符 插槽 等到父组件调用子组件的时候 再传递标签 -->
    <slot></slot>
  </view>

父组件

<Tabs tabs="{{tabs}}" binditemChange="handleItem">
  <block wx:if="{{tabs[0].isActive}}">0</block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
  <block wx:else="{{tabs[3].isActive}}">3</block>
</Tabs>

小程序和web本地存储的区别

区别	小程序	web
代码方式	存：wx.setStorageSync(“key”,“value”) 取：wx.getStorageSync(“key”)	存：localStorage.setItem(“key”,“value”) 取：localStorage.getItem(“key”)
类型转换	无，原来的类型,直接取存即可	转换为字符串存储，取出后是字符串（通常需要我们自己转化为JSON存储，取出再转换回来）

页面全局参数

页面自定义的变量 (写在data同层级,eg：XXXX)，不同于小程序的全局变量globalData，好处是方便在不同函数中使用这个变量(只需 this.XXXX )，赋值不需 this.setData() 即可改变值

Page({
	data:{},
    //定义的页面全部参数
    Message: '',
    fnc1(){
    	this.Message = 'Hello'; //Message为‘Hello’
    },
	
	fnc2(){
        this.Message = 'Hi'; //Message为‘Hi’
    }
})

优化发送请求

优化同时发送很多个请求次数，隐藏和显示 加载中 弹框提示的问题
用计数器原理，每一次发送请求累加，显示 加载中 弹框，发送完毕后累减，等到计数为0，隐藏 加载中 弹框

let ajaxTimes = 0; //统计发送请求的次数

const request = (params) => {
    let header = {...params.header};
    //拼接header 加上token
    header["Authorization"] = wx.getStorageSync("token");

    ajaxTimes++; //注意这里
    wx.showLoading({
        title: '加载中',
        mask: true //加载蒙板
    })

    //定义公共的url
    const baseUrl = "";
    return new Promise((resolve, reject) => {
        wx.request({
            ...params,
            header: header,
            url: baseUrl + params.url,
            success: (result) => {
                resolve(result);
            },
            fail: (err) => {
                reject(err);
            },
            complete: () => {
                ajaxTimes--;
                //最后一次才隐藏
                if(ajaxTimes === 0) wx.hideLoading();
            }
        });

    })
}

onShow、onLoad获取页面传送的参数

onshow需通过页面栈，获取参数

onShow(){
    /* 获取当前的小程序页面栈-数组 长度最大是10页面 */
    let pages = getCurrentPages();
    // 数组中 索引最大的页面就是当前页面
    let currentPage = pages[pages.length - 1];
    console.log(currentPage.options);
  },

onLoad直接在option获取参数

onLoad(options){
	console.log(options);
}

微信小程序中常用的api

弹框 — wx.showModal
提示 — wx.showToast
获取用户登录后的code — wx.login

获取用户信息

<!-- 配合button open-type=“getUserInfo” 
    getUserInfo--获取用户信息 ,绑定事件
使用 -->
<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">
</button>
<script>
	 //用户登录
  handleGetUserInfo(e){
    //获取用户信息
    const {userInfo} = e.detail;
  },
</script>