原生微信小程序的一些注意点
1、微信小程序的数据更新
Page({
// 响应式的数据定义在data里面
data: {
bannerList: []
},
// 微信小程序的数据更新是在setData里面做的
this.setData({
bannerList:res.data.message
})
})
2、请求接口如果报错可能是校验合法域名了,需要勾上不校验
3、wx:for遍历后,内部的插值直接使用item即可
<swiper
indicator-dots
autoplay
interval="{{interval}}"
duration="{{duration}}">
// 直接wx:for={{数据源}}即可
<block wx:for="{{bannerList}}" wx:key="*this">
<swiper-item>
// 内部取值直接用item.xxx就可以取到值 ,item是固定的默认值
<image class="banner-img" src="{{item.image_src}}"></image>
</swiper-item>
</block>
</swiper>
4、获取当前遍历的index
// 使用 wx:for-index="index" 即可打印当前遍历的index
<view
wx:for="{{item.product_list}}"
wx:for-index="index"
class="fashion-left-img" >
{{index}}
</view>
// 或者使用 wx:key="{{index}}"
5、事件传参
// 定义事件
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
/* 传递参数
data-alpha-beta 转换 dataset.alphaBeta
data-alphaBeta 转换 dataset.alphabeta
*/
Page({
// 取值 event.currentTarget.事件名
bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
}
})
// 补充:使用解构方式接参
attack(event) {
let {currentTarget:{dataset:{id}}} = event
console.log(id);
},
6、小程序页面传参
// 当前页面自定义方法
gotoDetails(e){
var url = e.currentTarget.dataset.url;
// console.log(url)
wx.navigateTo({
url: '../details/details?url='+url,
})
},
// 跳转页接收
onLoad:function(options){
let url = options.url;
this.setData({
url:url
})
},
7、原生微信小程序不支持插值表达式内套模板字符串
// 正确写法
<text wx:if="{{item.status == 1 }}">还差{{item.differNum}}个</text>
<text wx:if="{{item.status == 2 }}">购买完成</text>
<text wx:else>购买失败</text>
// 错误写法
<text>{{item.status == 1 ? `还差${item.differNum}个` : item.status == 2 ? '购买完成' : '购买失败'}}</text>
8、分享好友
微信小程序分享分两种
1、点击页面按钮的分享
2、小程序胶囊处的分享
按钮的分享和胶囊处的分享可以做不同的展示效果,通常胶囊处的分享用来分享整个页面,按钮的分享用来让用户助力。
胶囊处的分享:
按钮的分享:
这两中分享会走 onShareAppMessage()
方法,这个方法有一个回调函数,可以判断分享的来源
onShareAppMessage(e) {
if(e.from == "button") {
console.log('按钮分享');
return {
title: `点击助力“${userInfo.name}”,开盒助力,100%中奖`, //分享出去的标题
imageUrl: "图片路径", //分享时显示的图片
path: `/pages/home/index?goodsid=${xxx}`//别人点击链接进来的页面及传递的参数
}
} else {
console.log('胶囊分享');
return {
title: `盲盒大礼,参与即得!`, //分享出去的标题
imageUrl: "图片路径", //分享时显示的图片
path: `/pages/home/index`//别人点击链接进来的页面及传递的参数
}
}
}
图片路径未填写分享时偶尔会报错,需要注意。
好友点击链接进入分享页的时,可以在 onShow
或者 onLoad
获取上一步分享出去的参数
onLoad(options) {
console.log('获取分享的参数',options);
},
onShow() {
let pages = getCurrentPages();
let currentPage = pages[pages.length - 1];
console.log('获取分享的参数',currentPage.options);
},
9、showTost和showLoading不能同时使用
wx.showLoading(Object object)
wx.showToast(Object object)
这两个方法不能同时使用,否则只会显示其中一个,另外一个被覆盖不显示,如果要同时使用,建议使用定时器分开,等第一个弹框执行完后再执行第二个
wx.showToast({
title: '请求成功',
icon: 'none',
duration: 1000
})
setTimeout(()=>{
wx.showLoading(...)
},1000)
原生微信小程序的一些注意点的更多相关文章
- Taro -- 原生微信小程序转taro
微信小程序转Taro (转发https://nervjs.github.io/taro/docs/taroize.html) Taro 可以将你的原生微信小程序应用转换为 Taro 代码,进而你可以 ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- 原生微信小程序数据渲染
一直在写vue,第一次接触微信小程序,还是原生,最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊!!所以最近大概更新的都是微信小程序原生的内容了~~么么哒!!一定会继续努力的!!tips:在小程序项目 ...
- 原生微信小程序脚手架(支持npm)
微信小程序支持npm 为了支持生态扩展,社区贡献者可以提供更加丰富的功能,已经支持了第三方小程序开发功能,见如下地址. 微信小程序支持npm https://developers.weixin.qq. ...
- 如何将原生微信小程序页面改成原生VUE框架的H5页面
项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将 ...
- 原生微信小程序的生命周期
小程序的生命周期函数:onLaunch:function(){当启动小程序时触发小程序只会启动1次,一般为初次打开时一般只会触发一次},onShow:function(){当小程序从后台切入到前台时触 ...
- 原生微信小程序里类似于计算属性写法
可直接在wxml文件里直接写入直接调用.变量只支持var命名,不支持let const </view> <view class="wx_bgc" ...
- 微信小程序开发框架技术选型
目前微信小程序开发有三种方式,原生微信小程序,使用mpVue或wepy微信小程序开发框架. 三种开发方式横向对比资料如下:
- 微信小程序--每周图书推荐
这是我个人的第一个原生微信小程序,作为一枚萌新,自己没有前端经历,所以代码很混乱,界面很简单,难度也很低,主要用来记录自己学小程序过程中遇到的问题. 一. 先上预览图 左右滑动切换每周推荐的图书,点击 ...
- Taro 微信小程序 上传文件到minio
小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...
随机推荐
- Linux禁止摄像头自动曝光(手动调节曝光)
前言 很多摄像头具有自动曝光的功能,例如在较暗的调节下,提高曝光率,在较亮的调节下降低曝光.下面简单介绍在linux平台俩种方式来修改自动曝光. 软件调节(图形化界面) 安装qv4l2 sudo ap ...
- 一次MTU问题导致的RDS访问故障
导语 VPN是一种通过公网连接两个或多个私网站点的专用网络,使得这些站点仿佛是通过专线连接在一起.IPSec是一套协议框架,用于保证数据传输的私密性,完整性,真实性.但是VPN网络经常会带来一些连通性 ...
- CompletionService 使用小结
本文为博主原创,转载请注明出处: 实现异步任务时,经常使用 FutureTask 来实现:一个简单的示例代码如下: public static void main(String[] args) thr ...
- Kafka教程(三):原理及存储
一.思维导图 1.实时更新连接 https://www.mubucm.com/doc/1GRE2U7qYuj 2.思维导图图片 二.具体内容 8.系统架构 架构推导 拓扑结构 多对多 ...
- 想早点下班?试试Aorm库吧,更方便的进行Go数据库操作
使用go进行项目开发,大多数人会使用gorm,但是gorm有一些缺点,我无法接受.于是开发出了aorm,目前能有满足日常开发需求,并且完善了使用文档,希望能够帮助到大家. Aorm Golang操作数 ...
- 三步快速搭建Typora图床(SM.MS+PicGo)
三步快速搭建Typora图床(基于SM.MS+PicGo) 前言 在有些同学使用Typora的过程中,会发现Typora不像Word一样,在文档脱离本机后依然正常显示图片,自己的tyopora文件在发 ...
- Jenkins&&gitlab
DevOps 强调整个组织的合作以及交付和基础设施变更的自动化 gitlab下载: 下载地址: https://docs.gitlab.com/ee/install/requirements.html ...
- uniapp微信小程序内部跳转其他微信小程序
uniapp小程序内点击某个按钮跳转另外一个小程序连接,具体实现步骤如下: <view class="home-Item" @click="goNativeinde ...
- Ubuntu:Docker 容器操作
创建容器 1.docker run [option] 镜像名 [向启动容器中传入的命令] 常用可选说明 -i 表示以"交互模式"运行容器 -t 表示容器启动后会进入其命令行.加入这 ...
- AWVS漏洞扫描器的使用
前言 AWVS是一款强大的web漏洞扫描工具,扫描速度快,可针对特定的漏洞进行扫描测试,用于在按全人员对指定企业进行安全扫描以及测试人员对web应用检测漏洞. AWVS使用以及功能介绍 这里介绍的是使 ...