微信小程序开发之原生小程序开发和uniapp开发的区别,两种开发方式语法上的区别

news2024/11/26 9:44:00

目前小程序开发有两种形式,分别是原生小程序开发和使用uniapp开发,
uniapp和小程序原生开发都有各自的优缺点,开发者可以根据具体需求选择合适的开发方式。

一、两者区别如下:
  1. 编程语言:uniapp使用Vue语法编写应用程序,而小程序原生开发使用微信小程序提供的API和组件进行开发
  2. 开发工具:uniapp可以使用HbuilderX、VSCode等多种开发工具进行开发,而小程序原生开发需要使用微信小程序开发工具进行开发
  3. 平台适配性:uniapp可以生成多个平台的应用程序,包括小程序、H5、App等,而小程序原生开发只能生成小程序
  4. 开发成本:相对于小程序原生开发,uniapp开发成本较低,因为开发人员可以重复使用相同的代码,只需要根据不同的平台进行适配即可
  5. 性能表现:相对于小程序原生开发,uniapp的性能表现略差,因为它需要使用Vue框架,而小程序原生开发则是使用原生JavaScript进行开发
二、原生小程序开发
  1. 原生开发使用微信开发者工具开发,可以从官网下载安装,https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  2. 安装完成后看到登录页,使用微信扫码登录,开发者工具将使用这个微信账号的信息进行小程序的开发和调试

  3. 新建项目,需要一个小程序的 AppID,登录的微信号需要是该 AppID 的开发者,可以在微信公众平台注册小程序,注册成功登录后在首页的基本信息里面可以看到该小程序的APPID;也可以先选择使用测试号。 需要选择一个空目录,或者选择的非空目录下存在 app.json 或者 project.config.json。当选择空目录时,可以选择是否在该目录下生成一个简单的项目。在这里插入图片描述

  4. 根据自己的需要创建小程序,可以选择官方提供的模板作为小程序的基本项目代码,创建完的项目结构如下图在这里插入图片描述

  5. 如果一开始使用测试号,后面申请了自己的小程序,可以在project.config.json文件里面修改appid,如果使用的是测试号新建打开项目,可以看到上传按钮是置灰的,如果改成已申请的小程序的appid,上传按钮就会变成可点击在这里插入图片描述

  6. 使用已申请的小程序appid之后,点击右上角上传按钮提交版本代码,小程序管理者在微信公众平台登录该小程序,进入版本管理,可以看到刚刚提交开发版本,设为体验版本可以扫描二维码查看,其他人如需体验,需在成员管理里面新增体验成员后方可查看在这里插入图片描述

  7. 发布上线前需点击提交审核,微信官方审核完成后,可以根据自己的时间点击发布,即小程序上线。

三、uniapp开发小程序

1、uniapp推荐使用HbuilderX作为开发工具,可以从官网下载安装,https://www.dcloud.io/hbuilderx.html
2、安装完成打开,点击工具栏里的文件 -> 新建 -> 项目在这里插入图片描述

3、选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例,可以根据自己的需要选择创建项目在这里插入图片描述

4、也可以使用cli安装,会提示选择项目模板,如下图

npm install -g @vue/cli  //全局安装vue-cli
vue create -p dcloudio/uni-preset-vue my-project(项目名)   //创建项目

在这里插入图片描述
创建成功的项目目录在这里插入图片描述
5、进入uniapp项目,点击工具栏的运行,可以运行到浏览器、终端和小程序模拟器等地方,本地开发小程序的话,就是运行到微信开发者工具,即可在微信开发者工具里面体验uni-app。如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。微信开发者工具需要开启服务端口,在微信工具的设置->安全中。
在这里插入图片描述
运行成功如下图,会自动打开微信开发者工具运行项目
在这里插入图片描述

6、可以在hbuilderX中点击发行按钮,勾选自动上传到微信平台,如下图,也可以和原生的一样,运行打开微信开发者工具之后,点击上传按钮上传至微信公众平台
在这里插入图片描述
7、之后按照 “提交审核” => “发布” 小程序标准流程,逐步操作即可。

四、比较原生开发小程序与使用uniapp开发小程序语法上的区别

1、页面布局模板

微信小程序:(wxml可以多个并列根标签)
<view></view>
<view></view>
​
uniapp:(模板只有一个根标签)
<template>
    <view></view>
</template>

2、class写法不同

微信小程序:
<view class="common {{current === index ? 'active' : ''}}"></view>uniapp:
<view class="common" :class="{active:current === index}"></view>

3、API调用的差别(API基本相同,只是原生使用wx.调用,uniapp使用uni.调用)

微信小程序:wx.requestPayment、wx.request、wx.showModal、wx.showToast、wx.showLoading、wx.chooseImage、wx.switchTab、wx.navigateTo、wx.setStorageSync等等
​
uniapp:uni.requestPayment、uni.request,uni.showModal、uni.showToast、uni.showLoading、uni.chooseImage、uni.switchTab、uni.navigateTo、uni.setStorageSync等等
小程序的api在uni-app中只需要把wx替换成uni即可使用。

4、点击事件写法不同,传参方式不同,接收参数方式不同
微信小程序:

<view id="tapTest"  bindtap="tapName" data-id="id"> Click me! </view>
tapName(e){
    this.setData({currentId:e.currentTarget.dataset.id})
}uniapp:
<view @click="clickEvent(id)" ></view>
clickEvent(id){
    this.currentId = id
}

5、input的value值绑定写法不同

微信小程序:
<input value="{{sex}}" bindinput="inputChange"></input>
inputChange(e){
    console.log(e.detail.value)
}uniapp:
<input v-model="sex"></input>

6、for循环写法不同

微信小程序:
<view wx:for="{{currentList}}" wx:for-index="s_index" wx:for-item="s_item" wx:key="index"></view>uniapp:
<view v-for="(s_item,s_index) in currentList" :key="index"></view>

7、if判断写法不同

微信小程序:
<view wx:if="{{isShow}}"></view>uniapp:
<view v-if="isShow"></view>

8、阻止冒泡写法不同

微信小程序:
<view catchtap="clickTab">按钮</view>uniapp:
<view @click.stop="clickTab">按钮</view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1292052.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

高压放大器应用场景分析

高压放大器是一种重要的电子设备&#xff0c;其功能是将输入信号的电压幅度放大&#xff0c;以满足不同领域对于信号处理和放大的需求。下面安泰电子将对高压放大器在各个应用场景中的重要性进行深入分析&#xff0c;帮助大家更好地理解和使用高压放大器。 一、音频领域 音乐制…

Leo赠书活动-12期 【Java程序员,你掌握了多线程吗?】文末送书

Leo赠书活动-12期 【Java程序员&#xff0c;你掌握了多线程吗&#xff1f;】文末送书 ✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1…

静态住宅代理科普——实际应用场景以及如何配置?

住宅代理IP不仅是理论上的网络工具&#xff0c;它在多个实际应用场景中表现突出&#xff0c;极大地便利了用户的网络操作。接下来&#xff0c;将深入探讨住宅代理IP在市场调研、内容访问、社交媒体管理等方面的实际应用&#xff0c;揭示其在不同领域的实用价值。 ## 实际应用场…

无公网IP环境Windows系统使用VNC远程连接Deepin桌面

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…

SpringSecurity(五)

深入理解HttpSecurity的设计 一、HttpSecurity的应用 在前章节的介绍中我们讲解了基于配置文件的使用方式&#xff0c;也就是如下的使用。 也就是在配置文件中通过 security:http 等标签来定义了认证需要的相关信息&#xff0c;但是在SpringBoot项目中&#xff0c;我们慢慢脱离…

自媒体原创文章写作技巧,轻松过原创首发

在写作的世界里&#xff0c;原创文章是一种价值的象征&#xff0c;但对于新手小白来说&#xff0c;可能会觉得写出真正原创的内容颇具挑战。然而&#xff0c;实现原创并不是一件遥不可及的事情。在这篇文章中&#xff0c;我将分享10招&#xff0c;教你如何成为一位写作中的原创…

联想范建平:联想混合AI架构具备两大明显优势

12月7日&#xff0c;首届AI PC创新论坛在北京联想集团总部举办。联想集团副总裁、联想研究院人工智能实验室负责人范建平表示&#xff0c;为提供真正可信、个性化的AI专属服务&#xff0c;联想提出了混合智能&#xff08;Hybrid AI&#xff09;概念&#xff0c;并已经显现出更强…

SFX的妙用——如何在不安装软件的情况下打开自定义格式文件?

前段时间看到群友讨论压缩包能不能运行&#xff0c;想起了n年前用自解压文件SFX实现的一个“需求”&#xff1a;在没有安装任何应用软件的Windows&#xff08;当时还要支持XP&#xff09;上能双击打开自定义格式的文件。当时第一反应是这“需求”太奇葩了&#xff0c;简直是不可…

Pacifist:一款专为技术开发者打造的软件提取工具

对于技术开发者而言&#xff0c;有效且便捷的工具可以显著提高工作效率。Pacifist&#xff0c;作为一款专业的软件提取工具&#xff0c;专为技术开发者而设计&#xff0c;旨在提供简单、安全的软件提取和管理工作。 一、Pacifist的技术特点 Pacifist主要采用AppleScript作为其…

QT Windos平台下打包应用程序

一、windeployqt.exe windeployqt&#xff1a;是 Qt 框架自带的一个工具&#xff0c;用于将一个 Qt 应用程序在 Windows 操作系统下进行打包。它可以通过扫描应用程序的依赖项获取所需的 Qt 库文件、插件和翻译文件&#xff0c;以及复制应用程序可执行文件和所需的依赖项到指定…

挑选分支中某一个提交进行合并

复制提交的哈希(sha-1)值 挑选提交 git cherry-pick 复制过来的哈希值 若有冲突&#xff0c;解决冲突&#xff0c;没有冲突&#xff0c;即合并完成

Java---线程讲解(二)

文章目录 1. Runnable接口2. 卖票案例3. 同步代码块解决数据安全问题4. 同步方法解决数据安全问题5. 线程安全的类6. Lock锁 1. Runnable接口 1. 创建线程的另一种方法是声明一个实现Runnable接口的类&#xff0c;之后重写run()方法&#xff0c;然后可以分配类的实例&#xff0…

数据结构与算法编程题50

假设不带权有向图采用邻接矩阵G存储&#xff0c;设计实现以下功能的算法。 &#xff08;1&#xff09;求出图中每个顶点的出度。 &#xff08;2&#xff09;求出图中出度为0的顶点数。 &#xff08;3&#xff09;求出图中每个顶点的入度。 //参考博客&#xff1a;https://blog.…

数据库数据恢复—sqlserver数据库文件被加密,文件名被篡改的数据恢复案例

SQLServer数据库故障&#xff1a; 某公司服务器上的SQLServer数据库被加密&#xff0c;无法使用。被加密的数据库有2个&#xff0c;数据库的MDF、LDF、log文件名字被篡改。 数据库被加密截图&#xff1a; 数据库备份被加密&#xff0c;文件名字被篡改&#xff1a; SQLServer数…

Navicat 连接 GaussDB分布式的快速入门

Navicat Premium&#xff08;16.3.3 Windows版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构…

STM32CubeMx+MATLAB Simulink串口输出实验

STM32CubeMxMATLAB Simulink串口输出实验 &#x1f4cc;《STM32CubeMxMATLAB Simulink点灯程序》&#x1f4cd;相关篇《MATLAB Simulink STM32硬件在环 &#xff08;HIL&#xff09;实现例程测试》&#x1f516;需要的软件支持包&#xff1a;Embedded Coder Support Package fo…

【Java 基础】21 多线程同步与锁

文章目录 1.存在的问题2.使用同步解决问题1) synchronized2) volatile3) 锁 总结 用多线程过程中&#xff0c;有可能出现 多个线程同时处理&#xff08;获取或修改等&#xff09;同一个数据&#xff0c;这个时候就 会发生数据不同步的问题&#xff0c; 因此出现了同步和锁来…

html和css写淘宝的快速导航条

目录 1、css代码 2、html代码 1、css代码 <style>* {margin: 0;padding: 0;list-style: none;text-decoration: none;}.nav {width: 900px;height: 40px;background-color: rgb(247, 249, 250);margin: 50px auto;padding-left: 30px;}.nav>li {float: left;width: 1…

软件测试中年危机?30岁大关?“我“该如何破局...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 在软件测试行业摸…

Oracle 表数据锁了,处理方式,Oracle锁表处理

Oracle 表数据锁了&#xff0c;处理方式&#xff0c;Oracle锁表处理 参考连接&#xff1a; Oracle锁表处理_oracle锁表怎么解决_辣椒炒鸡的博客-CSDN博客 实践&#xff1a; 1、查看被锁的表 select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object …