小程序：uniapp开发和原生开发语法区别

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。所以使用uni-app开发的本质还是使用Vue，本文主要比较的是Vue和小程序原生开发的区别。

1.页面布局模板。

Vue：模板只有一个根标签

    <template><view></view></template>

小程序原生：wxml可以多个并列根标签

      <view></view><view></view>

2.根据条件动态添加class

Vue:

    <view :class="{active: current=== index}"></view>

小程序原生：

    <view class="{{current === index ? 'current' : '' }}"></view>

3.数组循环

Vue:

    <view v-for="(item, index) in []" :key="index"></view>

小程序原生：

    <view wx:for="[]" wx:key="index"></view>// 默认指定item为当前项, index是索引，wx:for-item，wx:for-index修改变量名<view wx:for="[]" wx:key="index" wx:for-item="subItem" wx:for-index="subIndex"></view>

4.点击事件绑定

Vue:

    <view @click="handleClick(index)"></view>// vue的js代码methods: {handleClick(index){}}

小程序原生：

    <view bindtap="handleClick" data-index="index"></view>// 事件函数和onload，data同级的,直接定义handleClick(event){// 参数event.currentTarget.dataset.index}

5.赋值格式

Vue:

     this.list = ['1','2','3'];

小程序原生：

    // 使用setData方法修改this.setData({list:['1','2','3']})

6.点击事件传值

Vue:

    <button @click="btnClick(123)"></button>

小程序原生：

    <button bindtap="benClick" data-number="123"></button>

小程序：uniapp开发和原生开发语法区别相关推荐

微信小程序/uni-app 蓝牙打印开发教程和常见问题总结【文末附源码】
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 文章目录微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 1️⃣ 写在前面 2️⃣ 蓝牙连接流程 3 ...
开发微信小程序(uniapp)
@2021SC@SDUSC WebStorm开发微信小程序(uniapp) 创建项目采用cli方式创建的项目 vue create -p dcloudio/uni-preset-vue my-pro ...
提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
前端的date类型后台接收_腾讯高级前端工程师支招，云开发实现小程序打赏和提现云开发实践...
导语微信打赏支付和红包提现,是日常高频功能,那么基于小程序云开发,如何实现小程序的打赏支付和红包提现呢?腾讯工程师给你支招. 如何实现小程序打赏支付 1.1 小程序打赏支付功能介绍这次的打赏功能, ...
微信小程序_1,基础配置及其开发工具
如果你想找某一内容,请ctrl+f,全文搜索小程序与普通网页开发的区别: 获取小程序的AppID 微信开发者工具 1.快速创建小程序项目 2.代码的查看和编辑 3.对小程序功能进行调试 4.小程序的 ...
人工智能实战小程序之语音_前端开发
1. 人工智能实战小程序之准备工作 2. 人工智能实战小程序之语音_前端开发今天这部分主要讲小程序前端功能的开发由于我偏后端,css是我的弱项,可能很多人和我一样开发小程序不知道如何下手,希望本篇 ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
便利店小程序需要服务器吗,便利店开发小程序的功能
随着小程序的不断优化和完善,小程序的场景也越来越细分化,使用范围非常广泛.现在不论是出行.餐饮.企业.购物等都开始入驻小程序,特别是对于一些便利店来说,开发小程序是会有不少功能的,那么便利店开发小程序 ...
【小程序源码】云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
小程序源码：云开发表情包制作神器-多玩法安装简单
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...

小程序：uniapp开发和原生开发语法区别

小程序：uniapp开发和原生开发语法区别相关推荐

最新文章

热门文章