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

news2024/11/15 6:59:34

最近因为公司项目原因需要将小程序的项目转换成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', //要跳转到的页面路径
				})
			},
		}

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

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

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

相关文章

Python绝对路径和相对路径详解

在介绍绝对路径和相对路径之前&#xff0c;先要了解一下什么是当前工作目录。什么是当前工作目录每个运行在计算机上的程序&#xff0c;都有一个“当前工作目录”&#xff08;或 cwd&#xff09;。所有没有从根文件夹开始的文件名或路径&#xff0c;都假定在当前工作目录下。注…

怎么编写PCIe设备驱动程序

怎么编写PCIe设备驱动程序 文章目录怎么编写PCIe设备驱动程序参考内核文件&#xff1a;一、 PCI总线设备驱动模型二、 获得PCIe设备的资源2.1 获得内存/IO空间2.2 获得中断号2.2.1 获得INTx中断号2.2.2 获得MSI-X/MSI中断号三、 使能设备致谢参考内核文件&#xff1a; Documen…

智慧税务+数据可视化:企业财务管理告别难题

一、引言在发展社会主义市场经济的过程中&#xff0c;税收承担着组织财政收入、调控经济、调节社会分配的职能。中国每年财政收入的90%以上来自税收&#xff0c;其地位和作用越来越重要&#xff0c;可称之为国家经济的“晴雨表”&#xff0c;有效进行税务管理、充分挖掘税务大数…

秒杀项目之商品秒杀接口测压及优化

目录一、生成测试用户二、jmeter压测2.1 测试三、秒杀接口优化3.1 优化第一步&#xff1a;解决超卖3.2 优化第二步&#xff1a;Redis重复抢购3.3 优化第三步&#xff1a;Redis预减库存3.3.1 商品初始化3.3.2 预减库存一、生成测试用户 将UserUtils工具类导入到zmall-user模块中…

【自然语言处理】【大模型】用于大型Transformer的8-bit矩阵乘法介绍

用于大型Transformer的8-bit矩阵乘法介绍原文地址&#xff1a;A Gentle Introduction to 8-bit Matrix Multiplication for transformers at scale using transformers, accelerate and bitsandbytes 相关博客 【自然语言处理】【大模型】用于大型Transformer的8-bit矩阵乘法介…

产品经理必看的高效产品文档撰写指南

对于企业来说&#xff0c;如何推广自己的产品是一个非常重要的话题&#xff0c;而其中必要的就是创建企业产品宣传册&#xff0c;这对于产品宣传非常重要&#xff0c;尤其是一些大公司&#xff0c;非常重视这种产品展示方式。因为它可以更完整地展现产品&#xff0c;撰写一份合…

uart 子系统

串口硬件储备知识&#xff1a; uart 在Linux 应用层的体现及使用 uart 就是串口&#xff0c;它也是属于字符设备中的一种&#xff0c;众所周知 字符设备都会在/dev/ 目录下创建节点&#xff0c;串口所创建的节点名都是以tty* 为开头&#xff0c;例如下面这些节点&#xff1a…

GeekChallenge

2.GeekChallenge 1.web 1.朋友的学妹 url&#xff1a;http://49.234.224.119:7413/ 右键点击查看源码&#xff0c;找到flagU1lDe0YxQF80c19oNExwZnVsbGxsbGx9 然后base64解码得到SYC{F1_4s_h4Lpfullllll} 2.EZwww url&#xff1a;http://47.100.46.169:3901/ 根据网站提示…

备战蓝桥杯【高精度乘法和高精度除法】

&#x1f339;作者:云小逸 &#x1f4dd;个人主页:云小逸的主页 &#x1f4dd;Github:云小逸的Github &#x1f91f;motto:要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前…

一步一步动手实现CANoe例程

最近在学习CANoe&#xff0c;记录下学习路程&#xff0c;方便后续查看。参考《CANoe开发从入门到精通》和CANoe软件内附带的Easy例程&#xff0c;一步步去实现这个例程&#xff0c;稍加优化。 一、创建仿真工程 打开CANoe 16 SP4进入主界面&#xff0c;单击File→New可以看到…

2022年Q4业绩超预期,功能性饮料能成为百事下一增长极吗?

北京时间2月9日&#xff0c;美国食品饮料巨头百事公司发布2022财年年报&#xff0c;第四季度业绩再超预期。 据百事公司财报显示&#xff0c;其2022年Q4实现营收280亿美元&#xff0c;市场预期为268.8亿美元&#xff1b;核心每股收益为1.67美元&#xff0c;市场预期为1.64美元…

专业调度器JS版:BRYNTUM SCHEDULER PRO

BRYNTUM SCHEDULER PRO 5.2 专业的日程安排小部件,有大脑的专业调度UI组件。Scheduler Pro 可帮助您安排任务&#xff0c;同时将资源和任务的可用性考虑在内&#xff0c;POJIE VERSION 连接你的任务 让 Scheduler Pro 处理剩下的事情。它将根据您定义的链接安排您的任务并遵守任…

目标检测论文阅读:GraphFPN算法笔记

标题&#xff1a;GraphFPN: Graph Feature Pyramid Network for Object Detection 会议&#xff1a;ICCV2021 论文地址&#xff1a;https://ieeexplore.ieee.org/document/9710561/ Abstract 特征金字塔已经被证明在需要多尺度特征的图像理解任务中是强大的。SOTA的多尺度特征…

指派问题与匈牙利法讲解

指派问题概述&#xff1a;实际中&#xff0c;会遇到这样的问题&#xff0c;有n项不同的任务&#xff0c;需要n个人分别完成其中的1项&#xff0c;每个人完成任务的时间不一样。于是就有一个问题&#xff0c;如何分配任务使得花费时间最少。通俗来讲&#xff0c;就是n*n矩阵中&a…

Django框架之展示书籍列表案例

展示书籍列表 需求 实现步骤 1.创建视图2.创建模板3.配置URLconf 1.创建视图 查询数据库数据构造上下文 传递上下文到模板 # 定义视图&#xff1a;提供书籍列表信息 def bookList(request):# 查询数据库书籍列表数据books BookInfo.objects.all()# 构造上下文context {boo…

超详细的JAVA高级进阶基础知识04

目录 4. 面向对象高级 - 常用的API 4.1 Arrays 工具类 4.1.1 Arrays 类介绍 4.2 冒泡排序 4.3 选择排序 4.4 二分查找 4.5 正则表达式 4.5.1 String 类中与正则有关的常见方法 4.5.2 练习 4.5.3 今日学习目标 4. 面向对象高级 - 常用的API 4.1 Arrays 工具类 4.1.1…

Java面试——Spring Bean相关知识

目录 1.Bean的定义 2.Bean的生命周期 3.BeanFactory及Factory Bean 4.Bean的作用域 5.Bean的线程安全问题 1.Bean的定义 JavaBean是描述Java的软件组件模型。在Java模型中&#xff0c;通过JavaBean可以无限扩充Java程序的功能&#xff0c;通过JavaBean的组合可以快速的生…

Day887.MySQL写入binlog和redolog的流程机制 -MySQL实战

MySQL写入binlog和redolog的流程机制 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于MySQL写入binlog和redolog的流程机制的内容。 只要 redo log 和 binlog 保证持久化到磁盘&#xff0c;就能确保 MySQL 异常重启后&#xff0c;数据可以恢复。 那redo log 的写入…

《第一行代码》 第四章:碎片的最佳实践

一&#xff0c;碎片的简单用法 在一个活动中添加两个碎片&#xff0c;并且让这两个碎片平分活动空间。 第一步&#xff1a;首先在layout中创建 left_fragment.xml&#xff1a; <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"androi…

【LoRaWAN 时钟同步】

本文主要介绍了 LoRaWAN 自组网协议、设备工作模式、设备间的时间同步问题 LoRaWAN 时钟同步1. 前言2. 设备数据收发2.1 数据帧格式2.2 数据发送2.3 数据接收3. A类设备4. C类设备5. B类设备5.1 GPS5.3 网关时间同步5.4 节点时间同步5.4.1 首次时间同步5.4.2 节点接收Beacon5.5…