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

公共样式定义

/* 公共样式 */
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.jsgoPage(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)},

设置小程序头部胶囊颜色
1.白色半透明

"navigationBarTextStyle": "white"

滚动事件api

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

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

微信小程序开发教程手册文档
微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程 ...
微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
微信小程序公众平台的文档链接
微信小程序公众平台的文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html
微信小程序开发---页面生命周期
微信小程序开发---生命周期何为生命周期小程序全局[app.js]---生命周期小程序页面[pages/pagename.js]---生命周期何为生命周期生命周期是指一个事物从创建到销毁的一 ...
微信小程序开发页面无法显示，未注册报错
微信小程序开发 VM507 WAService.js:2 Page "pages/post/post" has not been registered yet 在对应的js文件中检 ...
微信小程序绑定云服务器文档,微信小程序云开发搭建一个管理小程序.pdf
微微信信小小程程序序云云开开发发搭搭建建一一个个管管理理小小程程序序概概述述 : 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云能力. 云开发为开发者提供完整的云支持, ...
微信小程序开发之官方文档学习（一）
小程序宿主环境渲染层和逻辑层小程序的运行环境分成渲染层和逻辑层:WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层.渲染层和数据相关:逻辑层负责产生.处理数据,通过 Page 实 ...
微信小程序卡包wx.addcard文档缺失-ext参数说明
前言微信小程序卡包打通文档缺失,特别是wx.addcard文档,没有对ext参数有详细的说明,可能会导致跳转卡包领取界面时,提示参数错误等问题.因为小程序卡包文档缺失的问题,我在开发过程中遇到各种问 ...
四十七、微信小程序开发页面结构WXML
这年头,一天不学习,天理难容. 还是赶紧复习微信小程序的知识,加大学习力度. 文章目录 WXML 数据绑定 WXML基本语法系统组件 WXML WXML(WeiXin Markup Language ...

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

公共样式定义

微信小程序开发一定要设置实际宽度

使用images一定设置宽-

使用背景图片(`background-image`)需要引入线上链接`http...`

注意判断类型

自定义微信小程序的swiper

网页版样式变化一般通过jq添加类或者动画，微信小程序不能使用jq，所以通过布尔值控制状态来添加类名，需要、动画可以使用@key关键帧{{iszfmodal?‘mdlbox_show’:‘mdlbox_hide’}}

获取最新的数据使用this.setdata()的回调函数/this.setdata()异步问题

点击切换动画

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

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

微信小程序禁止page或者其他标签滚动

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

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

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

wx:for 控制循环的个数

页面切换更换头部标题

换行符

空格占位符

标签含有多个情况的判断全用wx：if，不用else

微信小程序使用text-index缩进失效，解决方法：使用padding，或者对view标签使用text-index属性

letter-spacing和word-spacing失效

button属于原生组件，他再带padding值不需要记得归零

关于使用自定义tab还是写tab组件需要根据需求

页面头部需要返回键的路由跳转使用下列方法，此方法跳转后保留本页面不销毁

微信小程序富文本解析：

父子各自都有事件

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

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

setData中键名key中使用变量

wx:if 和 hidden

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

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

小程序跳转内嵌h5页面

使用了button的标签样式错位，给button加类名

加载之前高度不确定需要根据数据撑开标签才能计算高度：在声明周期内通过定时器延迟调用函数

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

最新文章

热门文章

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

公共样式定义

微信小程序开发一定要设置实际宽度

使用背景图片(background-image)需要引入线上链接http...

自定义微信小程序的swiper

获取最新的数据使用this.setdata()的回调函数/this.setdata()异步问题

点击切换动画

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

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

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

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

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

wx:for 控制循环的个数

页面切换更换头部标题

换行符

空格占位符

标签含有多个情况的判断 全用wx：if，不用else

letter-spacing和word-spacing失效

关于使用自定义tab还是写tab组件需要根据需求

微信小程序富文本解析：

父子各自都有事件

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

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

setData中键名key中使用变量

wx:if 和 hidden

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

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

小程序跳转内嵌h5页面

使用了button的标签样式错位，给button加类名

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

最新文章

热门文章

使用背景图片(`background-image`)需要引入线上链接`http...`

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

标签含有多个情况的判断全用wx：if，不用else

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

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

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