当前位置: 首页 > 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…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...