微信小程序相关

i小杨

已于 2022-06-25 18:32:40 修改

阅读量157

点赞数

文章标签：微信小程序小程序

于 2022-06-16 08:44:31 首次发布

本文链接：https://blog.csdn.net/i_Satan/article/details/125308942

版权

在线文档

微信小程序官方在线文档

编译模式

问题描述:

开发过程中每次编译刷新界面的时候, 小程序都会回到主页面.我们还需要再逐个点击进入我们开发的页面中效率非常低.

解决办法:

在开发工具中添加新的编译模式.在路径中填入我们开发页面的路径, 然后我们每次编译刷新页面的时候,就会直接跳转到我们开发的页面当中.提高开发效率.

如图:

app.json 文件

全局配置微信小程序

pages

页面路径列表, 生成页面组件.

windows

全局的默认窗口表现,配置窗口的样式.

tabbar

配置tab 切换标签卡.

动态id

id=‘’ my-{{ ids [ 0 ] }}
在对应的js文件中声明一个 ids 数组, 这样就可以动态的配置 id名.

列表渲染

    logs: ['teichui', 'ximen', 'chuixue', 'feiyuan']

第一种方式:
<view wx:for="{{logs}}" wx:key="item">
    {{item}}--{{index}}
</view>

第二种方式: //可以给 item  和  index  重新命名
<view wx:for="{{logs}}" wx:for-item="testItem" wx:for-index="testIndex">
    {{testItem}}---{{testIndex}}
</view>

条件渲染

if条件语句:  isTrue  为 true 时,元素显示,false 不显示
<view wx:if="{{isTrue}}">条件渲染</view>
<view wx:else>else 条件渲染</view>

hidden条件语句: isHidden true 时 元素隐藏, false  元素不隐藏
<view hidden="{{isHidden}}">动态隐藏和显示</view>

事件绑定

bindtap=’ 事件名 ’

<button type="primary" bindtap="clickHandle">click</button>

//在 page 中声明绑定的方法 (与data 平级)

  clickHandle() {
    // console.log(this.data.logs, 'click')
    // this.data.myname = 'testCoco' //这样给 data中的属性 重新赋值是不生效的.

// 使用  this.setData({})  重新给 data 中的属性赋值.
    this.setData({
      myname: 'testCoco'
    })

阻止冒泡 : catchtap =’ 事件名 ’

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>
//点击 3 触发 2,3  点击2 触发 2;

捕获事件: capture - bind : touchstart = ’ 事件名 ’
(详参: 小程序框架 => 事件系统)

input 事件 bindinput

input 输入框的值在函数传入的参数中。

  inputhandle(event) {
    console.log(event.detail.value);
  },

微信小程序事件传参

需要借用 data-‘参数名’ 来进行传参
在事件中通过 e.target.dataset.参数名来获取

<button bindtap="deleteHandle" data-delId="{{index}}">delete</button>

	deleteHandle(e){
		this.data.datalist.splice(e.target.dataset.delid,1)
		this.setData({
			datalist:this.data.datalist
		})
	},

wx：if 和 wx：else 使用报错

检查自己是否把 if 条件语句和 for 循环语句一起使用。

在微信小程序中 if 和 for 一起使用时会报错。

currentTarget 和 target

当点击事件在父组件标签上的时候，

点击 view 标签，可以打印出 target中的自定义属性

点击 text 标签，打印 target 中的自定义属性是 undefinde

这个时候就可以在 currentTarget 中获取到父组件标签中的自定义属性。

总结：

如果父组件标签中有其他子组件标签，并且子组件标签想要获取父组件标签传入的自定义属性时，需要通过 e.currentTarget 来获取。

	<view wx:for="{{dataList}}" wx:key="{{index}}" 
	bindtap="clickHandle" data-currentIndex='{{index}}'>
		<text>{{item}}</text>
	</view>
	// target
	clickHandle(ee){
		console.log(ee.target.dataset.currentindex);//undefined
	},
	//currentTarget
	clickHandle(ee){
		console.log(ee.currentTarget.dataset.currentindex);
		//传入的 自定义参数的值。
	},

微信小程序单位 rpx

相关介绍

指南 => 视图层=> wxss

微信 .wxs文件数据处理

小程序不支持在 wxml 中直接使用 wxs.js 中的函数

创建一个 .wxs 为后缀的文件, 将需要在wxml 文件中用到的处理函数写在该文件中,最后将写好逻辑的处理函数暴露出去 .

在 wxml 文件中通过 wxs 标签来引入上面暴露的函数.

注意:

wxs 文件中,不可以使用箭头函数,尽量使用 es5 语法规范.
结合文档中给出的语法规范进行开发.
在线文档参考

date.wxs 文件:

function handleDate(){
	return '11111'
}

module.exports = handleDate

wxml 文件 引用:

	<wxs src='./date.wxs' module="aaa"></wxs>
调用引入的处理函数:
	<text>{{aaa()}}</text> // 页面显示 11111

微信小程序数据请求

wx.request ( { } )

注意:

微信小程序中没有跨域的限制.

微信小程序中有域名安全添加的问题,需要在小程序后台的开发设置中去添加.

最后可以在开发工具中同步自己添加的域名.

wx.request({
			url: 'url',
			methods:'get',
			data:{},
			success:(res)=>{
				console.log(res)
			},
			fail:()=>{

			},
		})

微信小程序图片相关属性

在线参考文档
在 image 组件标签上添加一个 mode 属性.然后根据自己的需要添加相应的属性值.

微信小程序 swiper 组件

在线文档
开发 => 组件 => 视图容器 => swiper

微信小程序 scroll-view 组件 (滚动视图区域)

在线文档
开发 => 组件 => 视图容器 => scroll-view

微信小程序自定义组件

可以创建一个 components 文件夹跟page文件夹同级. ( 新建component )

引入公共(自定义)组件

在需要引用公共组件的 ’ 引入组件 ’ .json 文件中引入.
在 ’ 引入组件 '.wxml 文件中写入公共组件标签.

自定义组件 - 在线文档

需要引入组件的 json 文件:
{
  "navigationBarTitleText": "测试",
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }
}
需要引入组件的 wxml 文件:
<navbar></navbar>

微信小程序父子组件传值

自定义组件-在线文档

父组件给子组件传值

子组件需要在 properties 属性中接收父组件传过来的属性.

子组件给父组件传值

在父组件中声明一个方法,然后子组件去触发这个方法的同时把值传给父组件.

父组件中:
<navbar current='{{current}}' bindParentHandle='parentHandle'></navbar>

  parentHandle(val) {
    this.setData({
      current: val.detail.currentTarget.dataset.index,
    });
  },

子组件中:
// 接收父组件传过来的值
  properties: {
    current: {
      type: Number,
      value: 0,
    },
  },
  //触发 父组件中的事件,并传值给父组件
    childrenHandle(evt) {
			this.triggerEvent('ParentHandle',evt)
    },

微信小程序实现导航和轮播图互动

大概效果:

点击导航,轮播图可以跟着改变
滚动轮播图,导航也可以跟着改变.

主要知识点:

父子组件中的通信

父组件中-html部分:

<navbar current='{{current}}' bindParentHandle='parentHandle'></navbar>
<swiper bindchange='swiperChange' current="{{current}}">
	<swiper-item wx:for="{{catelist}}" wx:key="index" >{{item}}</swiper-item>
</swiper>

父组件中-js部分:
  data: {
    current: 0,
    catelist: ["衣服数据", "裤子数据", "帽子数据"],
  },
//轮播图 change 事件
  swiperChange(evt) {
    this.setData({
      current: evt.detail.current,
    });
  },
//自定义事件,用于父子组件传值
  parentHandle(val) {
    this.setData({
      current: val.detail.currentTarget.dataset.index,
    });
  },

子组件中-html部分:

<view class="box">
	<view wx:for="{{list}}" wx:key="index" bindtap="childrenHandle" data-index='{{index}}' class="{{current==index?'active':''}}">{{item}}</view>
</view>

子组件中-js部分:
properties: {
    current: {
      type: Number,
      value: 0,
    },
  },

  data: {
    list: ["衣服", "裤子", "帽子"],
  },

  methods: {
    childrenHandle(evt) {
			this.triggerEvent('ParentHandle',evt)
    },
  },

微信小程序插槽

插槽-在线文档
如果需要使用多个插槽需要配置如下属性:

multipleSlots: true // 在组件定义时的选项中启用多 slot 支持

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

父组件 html 部分:

<navbar current='{{current}}' bindParentHandle='parentHandle'>
	<button slot='top'>插槽按钮(上)</button>
	<button slot='bottom'>插槽按钮(下)</button>
</navbar>

子组件 html 部分:

<view>
	<slot name='top'></slot>
	测试插槽
	<slot name='bottom'></slot>
</view>