正文 

当前位置： 首页 > 知识 > java教程

微信小程序与uni-app的区别(代码片段)

st646889325 st646889325     2022-12-03     281

关键词：

在微信小程序的平台上，两者的基础用法除了语法外基本一致，在此不讨论使用uni-app制作H5、App的特殊情况，只说最通俗易懂的语法区别。

触摸事件名称：
①微信小程序：bindtap
②uni-app：@click

函数传参方式：
①微信小程序：<view bindtap="click" data-id="id"></view>
②uni-app：<view @click="click(id)"></view>

函数接收参数：
①微信小程序：function(e) this.setData( currentId:e.currentTarget.dataset.id )
②uni-app：function(id) this.currentId = id

for循环：
①微信小程序：<view wx:for="currentList" wx:for-index="s_index" wx:for-item="s_item"></view>
②uni-app：<view v-for="(s_item,s_index) in currentList"></view>
微信小程序可以不写wx:for-index和wx:for-item，默认为index和item

if判断：
①微信小程序：<view wx:if="isShow"></view>
②uni-app：<view v-if="isShow"></view>

src动态接收图片：
①微信小程序：<image src="item.img"></image>
②uni-app：<image :src="item.img"></image>

页面传参：
①微信小程序：<navigator url="/pages/live?id=item.room_id"></navigator>
②uni-app：<navigator :url="'/pages/live?id=' + item.room_id"></navigator>
两者接收参数都是在onLoad(options)方法中获取，在此不多提及。

全局数据定义：
①微信小程序：globalData:baseUrl:"www.com"
②uni-app：this.prototype.baseUrl = "https://www.ccc"

全局数据调用：
①微信小程序：getApp().globalData.baseUrl
②uni-app：this.baseUrl

数组拼接：(我真没有歧视微信小程序的意思)
①微信小程序(ES5)：this.setData( list:this.data.list.concat(res.list) )
②uni-app(ES6)：this.list = [...this.list,...res.list];

阻止冒泡：
①微信小程序：<view catchtap="clickTab">我是按钮</view>
②uni-app：<view @click.stop="clickTab">我是按钮</view>

api的差别(支付作栗子)：
①微信小程序：wx.requestPayment()
②uni-app：uni.requestPayment()
小程序的api在uni-app中只需要把wx替换成uni即可使用。

跨界面获取选择的参数
场景类似于填写表单时某个信息要跳转到其他页面选择数据后再返回，并在原填写表单页得到并展示刚才选择的数据，当然还有其他相关的问题能够运用该方法。
①微信小程序：通过getCurrentPages()获取页面栈，然后调用上n个页面的setData()方法，把数据存到上n个页面中。
 

// 选择参数的页面
chooseItem(data) 
 const pages = getCurrentPages();
 const prevPage = pages[pages.length - 3]; //上两个页面
 prevPage.setData(
   myName: data,
 );
 wx.navigateBack( delta: 2 ); //返回到上两个页面
,
// 获取参数的页面，即上述的->原填写表单页
onShow() 
   const pages = getCurrentPages();
   if (pages[pages.length - 1]) 
     const currPage = pages[pages.length - 1]; // 当前页面
     this.brandNum = currPage.data.myName; //这就是传递的参数
   
 ,

②uni-app：通过getCurrentPages()获取页面栈，然后使用prevPage.$vm.id = id，把数据存到上n个页面中。

// 选择参数的页面
chooseItem(data) 
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 3]; //上两个页面
  prevPage.$vm.id = id; // 区别只是这里不同
  uni.navigateBack( delta: 2 ); //返回到上两个页面
,
// 获取参数的页面，即上述的->原填写表单页
onShow() 
  const pages = getCurrentPages();
  if (pages[pages.length - 1]) 
    const currPage = pages[pages.length - 1]; // 当前页面
    this.brandNum = currPage.data.myName; //这就是传递的参数
  
,

uni-app技术分享|uni-app转小程序-实时消息(代码片段)

微信小程序实现实时消息与uniapp转码成微信小程序实现实时消息两者是一样的，区别仅仅是一个是原生小程序一个是uniapp转码成小程序。本文主要简单实现点对点消息与呼叫邀请等相关功能实现。uniapp转码成小程序逻辑与小... 查看详情

uni-app开发微信小程序使用微信小程序的插件(代码片段)

假如使用uni-app开发微信小程序需要用到官方插件----OCR插件,插件地址如下：OCR插件申请方式见插件地址介绍。本文主要记录调用方式1.在manifest.json的“mp-weixin”里添加"plugins":"ocr-plugin":"version":"3.0.1",... 查看详情

【uni-app】微信登录在微信小程序和app中的区别

参考技术A在uni-app中，使用微信登录用到的API如下：注意点：unionid只有在你绑定的微信开发平台之后，才会返回。这里就可能留下一个坑：如果是先开发微信小程序平台，积累了一批客户。再去申请开通微信开放平台，关联APP时... 查看详情

web-bightmlcssjavascriptvuewebpackgit微信小程序uni-app性能优化兼容性网络请求web安全其他(代码片段)

文章目录01、HTML基础1、行内元素有哪些？行内块元素有哪些？块级元素有哪些？空(void)元素有哪些？2、页面导入样式时，使用link和@import有什么区别？3、title与h1的区别、b与strong的区别、i与em的区别... 查看详情

uni-app微信小程序页面组件轮询定时刷新(代码片段)

踩坑前言我的代码结构是一个页面用了个组件，具体需要轮询的东西是展示在组件里面的。开始憨憨的把onShow写在组件里面，试了半天怎么都没用。终于想起来翻官方文档了，onShow一种是写在App.vue里面的应用生命周... 查看详情

uni-app微信小程序页面组件轮询定时刷新(代码片段)

踩坑前言我的代码结构是一个页面用了个组件，具体需要轮询的东西是展示在组件里面的。开始憨憨的把onShow写在组件里面，试了半天怎么都没用。终于想起来翻官方文档了，onShow一种是写在App.vue里面的应用生命周... 查看详情

uniapp外包杯学习笔记day07|微信小程序轮播图分类导航楼层图的开发与实现(代码片段)

...建home分支2、配置网络请求由于平台的限制，现需要建立uni-app中使用第三方包请求网络数据请求在uni-app项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求 1.轮播图的外层容器是swiper2.每个轮播项是swiper-item... 查看详情

微信小程序使用uni-app——开发首页搜索框导航栏（可同时兼容apph5小程序）(代码片段)

目录前言App、H5效果小程序效果一、兼容APP、H5的方式二、兼容小程序三、实现同时兼容前言首页都会提供一个搜索框给到客户，让客户自己去搜索自己想要的内容，这里就需要导航栏，来实现搜索页面的跳转，效... 查看详情

微信小程序-轮播图与列表(代码片段)

一、微信小程序之block在介绍轮播图、列表实现之前，先了解一个新标签–blockblock与view,text等的区别是渲染页面时，它不实际输出自身，但包含在block块中的组件会被输出。当你需要再显示中增加逻辑的时候，那... 查看详情

微信小程序-轮播图与列表(代码片段)

一、微信小程序之block在介绍轮播图、列表实现之前，先了解一个新标签–blockblock与view,text等的区别是渲染页面时，它不实际输出自身，但包含在block块中的组件会被输出。当你需要再显示中增加逻辑的时候，那... 查看详情

uni-app入门教程——环境配置与运行(代码片段)

uni-app入门教程1.uni-app简介2.uni-app开发工具的下载2.1Hbuilder电脑桌面适配3.Hbuilder运行uni-app项目3.1浏览器预览uni-app项目3.2微信小程序预览uni-app项目3.3手机预览预览uni-app项目1.uni-app简介    uni-app是一个使用Vue.js开发所有前端应... 查看详情

微信小程序基础介绍(代码片段)

目录前言：一、什么是微信小程序二、微信小程序的发展历史三、微信小程序的优缺点四、与其他相关概念的区别与H5的区别与公众号、订阅号、服务号、企业微信的区别五、小程序的环境六、初始化项目七、小程序单位八... 查看详情

uni-app+vue3+vant开发微信小程序探路...(代码片段)

...备工作：创建项目工具：HBuilder最新稳定版，uni-app官网可下载菜单栏：文件->新建->项目，创建一个空白的基于vue3版本的模板目录即可调试工具：预先下载安装微信开发者工具HBuilder中选中当前项目的... 查看详情

微信小程序与web前端的区别

...面出错，本文将对前端和小程序做一个区分。2问题描述微信小程序与web前端的区别。3算法描述在web的html中我们一般都是使用div、p、pan、a等标签来制作页面，但是在微信小程序中就是使用了view、text、image等来制作小程序，在两... 查看详情

uni-app做微信小程序的分包处理(代码片段)

我们的都知道微信小程序有随即随用，用完即走的优点，并且它开发门槛低，但是它也有一个致命的缺点，就是代码包体积的限制，这一缺点让小程序的开发有了一定的限制，现在有一方法可以减少代码包... 查看详情

微信小程序--配置uni-app的开发环境（四十八）(代码片段)

...有问题请私信😘😘😘文章目录前言一、配置uni-app的开发环境1、uni-app简介2、开发工具3、安装scss/sass编译4、快捷键方案切换5、修改编辑器的基本设置总结前言  大家好，又见面了，我是夜阑的狗🐶... 查看详情

微信小程序如何获得自己当前的定位呢？本文利用逆地址解析uni-app带你实现(代码片段)

...一、在腾讯定位服务配置微信小程序JavaScriptSDK二、使用uni-app获取定位的经纬度三、 逆地址解析，获取精确定位四、小提示前言效果展示一、在腾讯定位服务配置微信小程序JavaScriptSDK在浏览器搜索腾讯定位服务，找到官... 查看详情

uni-app微信小程序获取手机号并解密

参考技术A1、点击某个按钮，弹出请求微信授权界面。2、点击允许按钮，获取用户微信绑定的手机号与openId3、请求后端接口，实现登录。微信公众平台--->登陆--->开发--->开发管理--->开发设置查看APPID、secret在把上面获... 查看详情