当前位置: 首页 > news >正文

将小程序代码转成uni-app代码

最近因为公司项目原因需要将小程序的项目转换成uni—app的项目,所以总结了以下几点:

 

首先你可以先到uni-app的官网简单看一下对它的介绍,本次文章的介绍是针对简单的微信小程序来进行的转化。

在这之前我们来看一下目录对比

 

下面就来介绍一下转移的步骤

1、首先你要新创建一个uniapp项目,然后在pages文件下创建一个目录,随便创建,你这里和你小程序的项目名称保持一致也是可以的。然后我这里给一个示例:我在pages文件下新建了目录 demo 然后在它之下创建了demo.vue 文件

<template>
</template><script>
</script><style>
</style>

 2.在pages.json里配置它的路由信息。

 

"pages": [ {"path": "pages/index/index","style": {"navigationBarTitleText": "万景千言"}},],

 

3.接下来就可以进行转移了

3.1、把小程序 .wxml 的下的布局文件 都拷贝到 <template> 标签下

3.2、把 小程序样式文件 .wxss 样式 都拷贝到  <style>文件下 这里的 style 可以  加上scoped  就是只对自己引用,防止布局乱了 <style scoped>

3.3、接下来就要修改 标签的一些属性方法的用法了,这里只介绍我遇到了,没有介绍到的可以到官网进行查看。

列表渲染

在小程序中这样使用
 

<view class='item' wx:for="{{lesson}}" wx:key="ID" wx:for-item="item">

在uni-app中要这样使用 是vue的用法

<view class='item' v-for="(item,index) in lessonto " :key="index">

条件语句

在小程序中这样使用

 <label id="btnCollect_40" data-id='{{item.ID}}' wx:if="{{item.iscollection}}">已收藏</label><label id="btnCollect_40"  class='deletecolor' bindtap="collectionClick" data-id='{{item.ID}}' wx:else>收藏</label>

 在uni-app中要这样使用  vue用法

<button v-if="item.iscollection" class="deletecolorto" type="primary" size="mini">已收藏</button>

class的动态绑定 

在小程序中这样使用

<view class="div {{scope=='all'?'selected':''}}" catchtap='selecttype' data-type='all'>所有资料</view>

在uni-app中要这样使用 

<view class='itop' :class="{kai:item.isopen}">

点击事件 

 在小程序中:用 bindtap

 <label id="btnCollect_40"  class='deletecolor' bindtap="collectionClick" data-id='{{item.ID}}' wx:else>收藏</label>

在uni-app中要这样使用  @click

<view class="shareto" hover-class="shareto_on" @click='showPgFn'>

向方法里传递数据 

在小程序中  使用data-   (在小程序中  使用data-   小程序的方法不支持直接传递数据)

 <view class="bookimage"  bindtap='ShowResourceList' data-id='{{item.ID}} '>

在uni-app中 方法传递数据和 vue一样

<view class="bookimage" @click='ShowResourceList(item.ID)'>

 

组件的事件方法参考文档对应修改  

4、最后一步,就是把 小程序里的 js 写的方法放在  script标签下 

声明数据

在小程序中,直接放在data中,用this.data.img 调用

在uniapp中需要将数据放在

 

 

自定义方法的使用

小程序的可以直接声明使用 

bindViewTap() {wx.navigateTo({url: '../logs/logs'})},

uniapp的大部分放在methods里面可以直接使用,一些特殊的根据实际情况进行一些修改

	methods: {gototuiguang: function(options) {uni.navigateTo({url: '/pages/tuiguang/tuiguang', //要跳转到的页面路径})},getUserName(e) {console.log(e.detail.value.nickname); //用户输入或者选择的昵称},denglu: function() {uni.navigateTo({url: '/pages/login/login', //要跳转到的页面路径})},}

大概就是总结这么多了,如果有那些写错了欢迎大家指点指点!!!

相关文章:

将小程序代码转成uni-app代码

最近因为公司项目原因需要将小程序的项目转换成uni—app的项目&#xff0c;所以总结了以下几点&#xff1a; 首先你可以先到uni-app的官网简单看一下对它的介绍&#xff0c;本次文章的介绍是针对简单的微信小程序来进行的转化。 在这之前我们来看一下目录对比 下面就来介绍一下…...

C语言在游戏中播放音乐

使用 mciSendString 播放音乐 mciSendString 支持 mp3、wma、wav、mid 等多种媒体格式&#xff0c;使用非常简单。这里做一个简单的范例&#xff0c;用 mciSendString 函数播放 MP3 格式的音乐&#xff0c;代码如下&#xff1a; // 编译该范例前&#xff0c;请把 music.mp3 放…...

机器学习算法:随机森林

在经典机器学习中&#xff0c;随机森林一直是一种灵丹妙药类型的模型。 该模型很棒有几个原因&#xff1a; 与许多其他算法相比&#xff0c;需要较少的数据预处理&#xff0c;因此易于设置充当分类或回归模型不太容易过度拟合可以轻松计算特征重要性在本文[1]中&#xff0c;我想…...

如何做好多项目全生命周期的资源调配,提升资源利用效率?【橙子】

随着产品研发中心各团队承接的研发项目数量和规模日趋增加&#xff0c;人均产值和利润目标逐步提升&#xff0c;人均承接的项目数量也逐渐增加&#xff0c;目前缺乏合理的研发资源管理方案&#xff0c;存在多项目研发过程中资源冲突及部分项目研发人员忙闲不均等现象&#xff0…...

JVM - 内存分配

目录 JVM的简化架构和运行时数据区 JVM的简化架构 运行时数据区 PC寄存器 Java栈 Java堆 方法区 运行时常量池 本地方法栈 栈、堆、方法区交互关系 Java堆内存模型和分配 Java堆内存概述 Java堆的结构 对象的内存布局 对象的访问定位 Trace跟踪和Java堆的参数配…...

【知识图谱论文】Bi-Link:通过转换器和提示的对比学习桥接来自文本的归纳链接预测

文献题目&#xff1a;Bi-Link: Bridging Inductive Link Predictions from Text via Contrastive Learning of Transformers and Prompts发表期刊&#xff1a;WWW2023代码&#xff1a; https://anonymous.4open.science/r/Bi-Link-2277/. 摘要 归纳知识图的完成需要模型来理解…...

jieba+wordcloud 词云分析 202302 QCon 议题 TOP 关键词

效果图 步骤 &#xff08;1&#xff09;依赖 python 库 pip install jieba wordcloud数据 概览 $ head -n 5 input.txt 中国软件技术发展洞察和趋势预测报告 2023 QCon 大会内容策划思路 FinOps&#xff1a;从概念到落地 开源芯片的发展现状、机遇和未来 乐观者前行&#xff0…...

包管理工具-npm-npx-yarn-cnpm

代码共享方案 在我们通过模块化的方式将代码划分成一个个小的结构后&#xff0c;在以后的开发中我们就可以通过模块化的方式来封装自己的代码&#xff0c;并且封装成一个工具&#xff0c;这个工具我们可以让同事通过导入的方式来使用&#xff0c;甚至你可以分享给世界各地的程…...

go gin学习记录1

环境&#xff1a; MAC M1&#xff0c;Go 1.17.2&#xff0c;GoLand 默认执行指令的终端&#xff0c;如果没有特别说明&#xff0c;指的都是goland->Terminal 创建项目 Goland中新建项目&#xff0c;在$GOPATH/src/目录下建立t_gin项目。 进入项目&#xff0c;在goland的T…...

Docker常用命令

1&#xff1a;帮助命令docker versiondocker infodocker --help2&#xff1a;镜像命令docker images&#xff08;列出本地主机上的镜像&#xff09;各个选项说明:docker imagesREPOSITORY&#xff1a;表示镜docker images像的仓库源TAG&#xff1a;镜像的标签IMAGE ID&#xff…...

论文写作——公式编辑器、latex表格、颜色搭配器

1、公式编辑器(网页版mathtype可用于latex公式编辑): MathType demo - For DevelopersLive demonstration about the features of Mathtype which allows edition equations and formulas (PNG, flash, SVG, PDF, EPS), based on MathML and compatible with LaTeX.https:/…...

MySQL数据库12——视图(VIEW)

视图概念 视图是一个虚拟表&#xff0c;称其为虚拟表的原因是&#xff1a;视图内的数据并不属于视图本身&#xff0c;而属于创建视图时用到的基本表。可以认为&#xff0c;视图是一个表中的数据经过某种筛选后的显示方式&#xff1b;或者多个表中的数据经过连接筛选后的显示方…...

第四代英特尔至强重磅发布,芯片进入下半场:软硬加速、绿色可持续

编辑 | 宋慧 出品 | CSDN 云计算 2023 年的第二周&#xff0c;英特尔重磅发布其企业级芯片领域重要的产品——第四代英特尔 至强 可扩展处理器。作为数据中心处理器当之无愧的王牌产品&#xff0c;迄今为止&#xff0c;英特尔已经向全球客户交付了超8500万颗​至强可扩展处理器…...

c++-运算符函数与运算符重载

目录概述例子注意问题概述 运算符重载是函数一个特殊情况&#xff0c;重载的运算符视为特殊的函数&#xff0c;称为运算符函数。 编译系统能依据使用运算符的不同环境&#xff0c;即参数&#xff08;操作数&#xff09;的数量或类型的差异&#xff0c;区分同一运算符的不同含义…...

【MySQL Shell】8.9.3 修复 InnoDB ClusterSet 中的成员服务器和集群

根据集群的问题或维护要求&#xff0c;可以使用以下操作来处理其成员服务器。除非另有说明&#xff0c;否则请使用使用 InnoDB Cluster 管理员帐户或服务器配置帐户获取的 Cluster 和 ClusterSet 对象&#xff0c;以便存储在 ClusterSet 对象中的默认用户帐户具有正确的权限。 …...

宝塔搭建实战php开源likeadmin通用管理pc端nuxt3源码(三)

大家好啊&#xff0c;我是测评君&#xff0c;欢迎来到web测评。 昨天给大家分享了admin前端的搭建部署方式&#xff0c;今天来给大家分享pc端在本地搭建&#xff0c;与打包发布到宝塔的方法&#xff0c;希望能够帮助到大家&#xff0c;感兴趣的朋友可以自行下载学习。 技术架构…...

【C++】---Stack和Queue的用法及其模拟实现

文章目录Stack最小栈栈的弹出压入序列逆波兰表达式求值用栈实现队列模拟实现queue用队列实现栈模拟实现Stack stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。它的使用和之前学习的ve…...

Python GUI编程

Python 提供了多个图形开发界面的库&#xff0c;几个常用 Python GUI 库如下&#xff1a; Tkinter&#xff1a; Tkinter 模块(Tk 接口)是 Python 的标准 Tk GUI 工具包的接口 .Tk 和 Tkinter 可以在大多数的 Unix 平台下使用,同样可以应用在 Windows 和 Macintosh 系统里。Tk8…...

2023年浙江水利水电施工安全员精选真题题库及答案

百分百题库提供水利水电施工安全员考试试题、水利水电施工安全员考试预测题、水利水电施工安全员考试真题、水利水电施工安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 119.下列关于大模板按照的说法正确的是&#x…...

Solon2 开发之插件,三、插件体外扩展机制(E-Spi)

插件体外扩展机制&#xff0c;简称&#xff1a;E-Spi。用于解决 fatjar 模式部署时的扩展需求。比如&#xff1a; 把一些“业务模块”做成插件包放到体外把数据源配置文件放到体外&#xff0c;方便后续修改 其中&#xff0c; .properties 或 .yml 文件都会做为扩展配置加载&a…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...