微信小程序开发页面总结-文档(ing)

禾苗种树

已于 2023-02-21 23:38:44 修改

阅读量853

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

于 2022-11-03 13:51:46 首次发布

本文链接：https://blog.csdn.net/m0_45011929/article/details/127668692

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

公共样式定义

/* 公共样式 */
page{
  height: 100%;
  background: #f7f7f7;
}
view,image,input,text,button,textarea {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 0;
 
}
input,textarea{
  outline: none;
  border: none;
}

微信小程序开发一定要设置实际宽度
使用images一定设置宽-
使用背景图片(background-image)需要引入线上链接http...
注意判断类型

 <text class="video_title">
  {{lisVidindex !=='' ? listData[lisVidindex].name:'暂无视频'}}
</text>

注意：！=’‘和！==’‘的结果不同，!=’‘会把0也包含在内，让你损index=0的数据

自定义微信小程序的swiper

通过改变当前的current--当前所在滑块的 index来实现！其他功能相同原理！
网页版样式变化一般通过jq添加类或者动画，微信小程序不能使用jq，所以通过布尔值控制状态来添加类名，需要、动画可以使用@key关键帧{{iszfmodal?‘mdlbox_show’:‘mdlbox_hide’}}
获取最新的数据使用this.setdata()的回调函数/this.setdata()异步问题

this.setData({
	//...
	},() => {你获取最新数据要干的事情、调去某个函数}
	
})

点击切换动画
A :原理：利用this.setdata()的回调函数和定时器改变布尔值来增加删除类名从而达到效果

/* 动画 */
//xx.wxss
.antonaimate需要加的动画{
  opacity: 0;
  transform: translateX(-40rpx) !important;
  /* transition: all 0.3s linear; */
}

.tab_item_content需要加动画的类{
  transform: translateX(0);
  transition: all 0.3s linear;
}

// xx.wxml
<view class="tab_item_content {{isopacity?'antonaimate':''}}">
  一些需要动画的内容
 </view>

//xx.js
onChangCyTab(optain){

    let that = this;
    that.setData({isopacity:true},()=>{

      setTimeout(()=>{ that.setData({isopacity:false})},500);

      
   //改变文案、手机展示、小tab选项
   
    })
    
  },

微信小程序 border-radius overflow不生效

//其实就是兼容问题
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

video控件属性不起作用（查了好多帖子qaq）

如：微信小程序video隐藏状态栏
需要在xx.js的data里设置属性的变量值再赋值过去,直接在wxml里写属性值如false无效
微信小程序禁止page或者其他标签滚动

//xx.js
//禁止page滚动，给你调用的函数方法加
wx.setPageStyle({
   style: {
     overflow: 'hidden'
   }
})

//xx.wxml
//禁止不含滚动需求的标签滚动，给标签加行内属性
<view  catchtouchmove="ture">

在微信小程序内获取一个标签的值：通过给该标签绑定属性data-xxx=''，然后在点击时通过点击对象e，来获取这个值

 <view data-xxx="{{item.title}}" bindtap="goPage">{{item.title}}</view>
//xx.js
  goPage(e){
    console.log(e,'ppp')
    let value = e.currentTarget.dataset.xxx;
  }

获取swiper轮播变动后当前current值

给swiper添加该方法bindchange

用变量设置style的值,或者变量需要通过计算得出style的值

<view style="width:{{comment_list.avg_fenshu*20}}%;"></view>

wx:for 控制循环的个数

 <view  wx:for="{{list}}" wx:if="{{index <3}}" wx:key="index">

</view>

页面切换更换头部标题

wx.setNavigationBarTitle({
      　　　　title: 'xxxxx公司' //页面切换，更换页面标题
      })

换行符

微信小程序里换行符不管用，需要使用\n和style="white-space: pre-wrap;"

//eg
 <view style="white-space: pre-wrap;">
左\n滑\n查\n看\n全\n部
</view>

空格占位符

<text class="info" decode="true">二&ensp;维&ensp;码：</text>

标签含有多个情况的判断全用wx：if，不用else
微信小程序使用text-index缩进失效，解决方法：使用padding，或者对view标签使用text-index属性
letter-spacing和word-spacing失效
button属于原生组件，他再带padding值不需要记得归零
关于使用自定义tab还是写tab组件需要根据需求

1.如果所有tab都是普通跳转就自定制tab
2.如果tab中有特殊需求，比如不是跳转页面而是通过事件打开微信开放能力open-type，那就用写组件template在需要的页面引用
页面头部需要返回键的路由跳转使用下列方法，此方法跳转后保留本页面不销毁

wx.navigateTo({
        url:url
  })

微信小程序富文本解析：
需求：详情页的获取的富文本内涵多张图片和文字，涉及到的难点：全局替换图片样式

 onLoad(options) {
  
  
    let contentInfo = this.data.resData.article_info.content
					    .replace('p>','p><br/>')
					    .replace(/<img/g,'<img style="width:750rpx;max-width:100%;height:100rpx;display:block;margin:0 auto;"')

    this.setData({
      contentInfo:contentInfo
    },function(){
      console.log(this.data.contentInfo)
    })


  },

父子各自都有事件
text不能加事件？

子view: catchtap='childClick' hover-stop-propagation='true'
父view: bindtap='parentClick'

scroll-view标签使用时需要加固定高度

 <scroll-view scroll-y="true" style="height: 300rpx;" >
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
 </scroll-view>

一个页面内多个video，只能播放一个；因为父级使用的 scroll-view所以需要关闭控制进度的手势 enable-progress-gesture="false"

<video object-fit="fill" preload="auto"  controls src="{{item.url}}" poster="{{item.poster}}" 
enable-progress-gesture="false"
    bindtap="onVideoSwitch"
  		id="{{index}}" 
  		data-index="{{index}}">
 </video>

 data: {
    currIndex:null,// 当前视频
 

    videoList:[
      {
        url:'https:xxx',
        poster:'https:xxx',
      },
      {
        url:'xxx',
        poster:'xxx.jpg',
      },
     
    ]
  },

onVideoSwitch(e){// 切换底部轮播视频

    let curIdx = e.currentTarget.id;
    console.log(curIdx,'id')

   if(!this.data.currIndex){//如果当前没有视频在播放
     this.setData({currIndex:curIdx});
     let videoContext = wx.createVideoContext(curIdx, this);
     videoContext.play();
   }else{
     //如果有视频在播放
     let videoContextPrev = wx.createVideoContext(this.data.currIndex, this);

    //this是在自定义组件下，当前组件实例的this，以操作组件内 video 组件
      if(this.data.currIndex !== curIdx){//当前播放视频不等于点击视频
        videoContextPrev.pause()
        this.setData({currIndex:curIdx});

        let videoContextCurrent = wx.createVideoContext(curIdx, this);
        videoContextCurrent.play();
      }

   }

  },

setData中键名key中使用变量
需求：封装复用函数时通过传入的参数来修改data里对应的数据内容
原理：es6 允许声明在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法，并且允许在对象属性中进行计算操作

getData(pam){
    this.setData({[pam]:res.data.data});
},

wx:if 和 hidden

因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

wx.showToast 提示会阻断后面执行的代码，所以有this.setData()修改时要放在 wx.showToast之前 深层逻辑？？？

 		this.setData({})
          wx.showToast({
            title: '留言成功请耐心等待回复',
            duration: 2000
          })

template模板没有配置文件(.json)和业务逻辑文件（.js）,所以template模板中的变量引用和业务逻辑事件都需要在引用页面的js文件中进行定义；

点击拨打电话

  onCall(){
    let phone = "188xxxxx" // 仅为示例
    wx.makePhoneCall({
      phoneNumber: phone  
    })
  },

小程序跳转内嵌h5页面

1.现在微信公众平台-开发-开发管理-开发设置-业务域名内设置要跳转的页面的域名（把校验文件放在这个页面的后台代码里？）
在这里插入图片描述
2.在开发者工具里新建一个page（正常的空白页面）：然后在wxml文件里复制如下代码

<view class="page-body">
  <view class="page-section page-section-gap">
    <web-view src="https://xxxxx.com"></web-view>
  </view>
</view>

3.点击跳转到该页面

  wx.navigateTo({
        url:url
      })

使用了button的标签样式错位，给button加类名
加载之前高度不确定需要根据数据撑开标签才能计算高度：在声明周期内通过定时器延迟调用函数

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    let that= this;
    setTimeout(function(){
      that.getTap();
    },4000)
     

  },

设置小程序头部胶囊颜色：页面文件.json
1.白色半透明

"navigationBarTextStyle": "white"

滚动事件api

  onPageScroll(e){
    // console.log(e,'ppp')
    if(e.scrollTop>100){
      console.log('dayi')
    }
  },

input事件与祖父级的点击事件冒泡：修改input会触发父级点击事件
解决方法：
1.给input包个父级，并设置catchtap事件阻止冒泡，这样input也能使用bindinput了
2.修改样式来规避这种情况的出现,把input与祖父变为同级
获取节点信息

    let that = this;
    //创建节点选择器
    var query = wx.createSelectorQuery();
    //选择#id,或者.class
    query.select('.xxx').boundingClientRect()
    query.exec(function(res) {
        //res就是 所有标签为mjltest的元素的信息 的数组
        //取高度
        that.setData({pageHeight:res[0].height});
    })