首先你可以先到uni-app的官网简单看一下对它的介绍,本次文章的介绍是针对简单的微信小程序来进行的转化。
在这之前我们来看一下目录对比
下面就来介绍一下转移的步骤
1、首先你要新创建一个uniapp项目,然后在pages文件下创建一个目录,随便创建,你这里和你小程序的项目名称保持一致也是可以的。然后我这里给一个示例:我在pages文件下新建了目录 demo 然后在它之下创建了demo.vue 文件
<template>
</template>
<script>
</script>
<style>
</style>
2.在pages.json里配置它的路劲信息。
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{"path": "pages/demo/demo",}
],
3.接下来就可以进行转移了
1)把小程序 .wxml 的下的布局文件 都拷贝到 <template> 标签下
2)把 小程序样式文件 .wxss 样式 都拷贝到 <style>文件下 这里的 style 可以 加上scoped 就是只对自己引用,防止布局乱了 <style scoped>
3)接下来就要修改 标签的一些属性方法的用法了,这里只介绍我遇到了,没有介绍到的可以到官网进行查看。
-1.列表渲染,在小程序中这样使用
<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">
-2.条件语句 在小程序中这样使用
<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>
-3. class的动态绑定 在小程序中这样使用
<view class="div {
{scope=='all'?'selected':''}}" catchtap='selecttype' data-type='all'>所有资料</view>
在uni-app中要这样使用
<view class='itop' :class="{kai:item.isopen}">
-4:点击事件 在小程序中:用 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'>
-5.向方法里传递数据 在小程序中 使用data- 小程序的方法不支持直接传递数据
<view class="bookimage" bindtap='ShowResourceList' data-id='{
{item.ID}} '>
在uni-app中 方法传递数据和 vue一样
<view class="bookimage" @click='ShowResourceList(item.ID)'>
-6:组件的事件方法参考文档对应修改
4)最后一步,就是把 小程序里的 js 写的方法放在 script标签下
注意 data 的应用有所不同。
-1.小程序中 想要动态改变组件 this.setData({scope:"all"})
data: {
scope:'my',
},
uni-app中: 想要动态改变组件 this.scope='all'
export default {
data() {
return {
scope: 'my',
}
},
-2.生命周期勾子函数和小程序一样
-3. 方法的使用,自定义的一些方法 在小程序中,这样
// 选择分类
selecttype:function(e){
var type = e.currentTarget.dataset.type;
this.setData({
scope: type,
})
this.getlesson(type);
},
在uni-app中这样 注意要放在 methods 方法里 根据实际情况进行一些修改
// 选择分类
selecttype(type){
this.scope: type,
},
-4:页面的跳转以及传参 在小程序中
wx.navigateTo({
url: '../tingxie/tingxie?id=' + that.data.audioID
+ "&url=" + that.data.audiourl + "&classlist=" +
JSON.stringify(this.data.classlist)
+ "&random=" +random_s1
+ "&readnumber=" + that.data.readnumber
})
接收参数:示例:
onLoad: function (options) {
var url = options.url;
this.data.url = url;
}
uni-app的跳转页面以及传参
uni.navigateTo({
url: '/pages/tingxie/tingxie?id=' + this.audioID
+ "&url=" + this.audiourl
+ "&classlist=" + JSON.stringify(that.classlist)
+ "&random=" + random_s1
+ "&readnumber=" + this.readnumber
});
接收参数:
onLoad(options) {
var url = options.url;
this.url = url;
}
总结:注意一些细节,勇于解决bug。
文章浏览阅读1.3k次。最近一学期一次的抢课大戏又来了,几家欢乐几家愁。O(∩_∩)O哈哈~(l我每次一选就过了hah,我还是有欧的时候滴)。看着他们盯着教务系统就着急,何况我们那教务系统,不想说什么。emmm 想周围的朋友,正好下午利用扩容前一段时间写了个小脚本帮助朋友抢课。(当然抢到了啦,^_^)私信小编001即可获取大量Python学习资料,名额有限因为时间不够,来不及仔细琢磨,我第一想法就是直接提交选课的数据包(..._青果教务系统抢课
文章浏览阅读4.6k次。很简单,下载证书后导入到受信任根目录证书下载,直接在代理状态浏览器访问burp点击CA就可以下载了 设置该证书全部信任,,switchyomega 设置如下即可 就可以抓https的包了 ...
文章浏览阅读1k次。一、循环赛的种类与特点(一)循环赛的种类循环赛又称循环法。是指参赛队(或个人,下同)之间,都要互相轮流比赛,最后按照各参赛队在全部比赛中的胜负场数、得分多少排定名次的比赛方法。它在对抗性项目比赛中经常被采用。循环赛包括单循环、双循环或分组循环三种。单循环是所有参赛队(人)相互轮赛一次;双循环是所有参赛队(人)相互轮赛二次;分组循环是参赛队(人)较多时,采用种子法,把强队(人)分散在各组,先进行小组..._c语言循环赛互打一场比赛 甲队两胜
文章浏览阅读1.6k次,点赞4次,收藏6次。最后的解决方法“在config--WebMvcConfig中不要继承WebMvcConfigurationSupport,而是实现WebMvcConfigurer接口”,且不要在idea中直接点击浏览器图标打开对应的html页面,要自己在浏览器输入url。在本次debug过程中,更加清楚地明白了,springboot项目启动过程中,只扫描引导类同包或子包下的程序,而在resources目录下的静态资源文件(没放到),需要被映射,才能被扫描到。_springboot项目前端端口号不同怎么办
文章浏览阅读80次。configmap 和secret 都需要提前创建configmap和secret都可以为pod提供挂载和变量的方式变量的方式有envfrom全部变量和valuefrom单个变量的引用configmap和secret 需要和引用的pod或者资源对象在同一个ns下。_configmap @value
文章浏览阅读2.2k次。下午在调试的时候报错数据库连接就报错我就很纳闷后面用原来的代码写发现还是报错System.TypeInitializationException:'The type initializer for 'MySql.Data.MySqlClient.Replication.ReplicationManager' threw an exception.'应该是出在Mysql包上的问题..._system.typeinitializationexception:““mysql.data.mysqlclient.mysqlpoolmanag
文章浏览阅读3.4k次。CTF中的RSA及攻击方法笔记1 数论基础1.1 模运算规则2 RSA相关题目2.1 已知 n,e,c 求 m2.2 已知 p,q,e 求 d2.3 已知dp,dq,c,p,q 求m2.4 仅已知c,c特别大 【c = m^e mod n】2.5 已知n1,n2,c1,c2,n 求 m2.6 已知n1,n2,e,c2 求m2.7 已知e,d,N 求p,q1 数论基础参考链接:https://www.freebuf.com/articles/web/257835.html1.1 模运算规则模运算与基_ctf rsa 多个n和多个c
文章浏览阅读2w次,点赞4次,收藏15次。数据库中时间类型是这样的,13位bigInt类型的数据select date_format(FROM_UNIXTIME(列名/1000),'%Y%m%d') from xx表原理就是把13位的时间格式/1000等于时间戳,使用FROM_UNIXTIME把时间戳转换成具体的日期ps:将时间转换为时间戳select unix_timestamp('2018-08-30..._bigint转日期
文章浏览阅读1.1k次。使用nvm切换node版本出现上述乱码时。使用管理员模式打开CMD就可以解决了~_exit status 5: exit status 1:
文章浏览阅读279次。Java使用类来构造自己的数据类型,类其实就是对一类数据和行为的数据封装;可以达到低耦合功能;Java注意啦:用类也是我们为了定义自己数据类型的一种方法,所以结构体,共用体也是一样的;都是为了处理数据而用的方法!类的存放问题: java源代码文件是以类为中心的,一个类的定义源码必须只在一个源文件实现;一个“文件名.java”文件名必须与文件中用public class 修饰的类名一致,java语法..._linux和java
文章浏览阅读8.2k次,点赞20次,收藏59次。快给你的Vue项目添加一个编辑图片组件吧给大家推荐一款功能极其强大的图片编辑插件 tui.image-editor快速体验首选在你的前端项目中安装:npm i tui-image-editor// oryarn add tui-image-editor现在你就去新建一个.vue文件,复制进去下面这段代码:<template> <div id="tui-image-editor"></div></template><scr_vue-image-editor
文章浏览阅读4.8k次。标题Flutter与Android混编在Android与Flutter混编中导入flutter的GetX框架时,配置getPages参数出错,在编译时不报错,但是运行之后,debug模式下出现红底白色的错误,错误显示为 Null check operator used on a null value,看一眼懵了,本地开发版本使用的是flutter2,配置的Getx库也确实在很早的版本中就支持了Null safety ,且配置的getPages为数组并且可为空,按照常理怎么也不可能出现这个错误!尝试的方案_flutter null check operator used on a null value