- 最近一直在加班，所以没时间更新，房子也要到期了搬家，等稳定下来再持续更新。
安装uni-ui
- 实在没想好选什么ui，就选择用uniapp官方出的插件了。
- 首先是安装：uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式
- 通过 uni_modules 导入全部组件：
- 使用hbuilderx导入就可以了
安装以后记得重新运行程序。
代码编写
- 简单写了下超链接：
- 发现uniapp的超链接在小程序里是没法直接跳转的，所以需要其他办法
- 新建一个out页面：
- 小程序跳转页面必须在page.json里面配置上，
{ "path": "pages/out/out", "style": { "navigationBarTitleText": "超链接"
}
}- 使用
uni.navigateTo进行页面跳转，拼接跳转参数。
<template> <view class="view_body" >
<div style="" class="mydiv">
<!-- <web-view src="https://www.baidu.com/"></web-view> -->
<ul>
<li v-for="i in v_hrefs" style='list-style:none;'>
<uni-icons type="link" size="20" color="#e84393"></uni-icons>
<a class='mya' @click="toout(i.url)">{{i.name}}</a>
<uni-icons type="closeempty" size="20" color="#e84393" @click="delete_link(i.id)"></uni-icons>
</li>
</ul>
</div>
</view></template><script>
export default { data() { return { title: '首页', v_hrefs:[{id: 12, name: "百度", url: "https://www.baidu.com/", author: "616"},{id: 14, name: "AcFun", url: "https://www.acfun.cn/", author: "616"}]
}
}, onLoad() { this.geturl()
}, methods: { toout(url){
uni.navigateTo({ url: '../out/out?url=' url
});
}, geturl(){
uni.request({ url: 'http://127.0.0.1:8000/api/geturl',
data: {//参数
id:1,
}, header: { 'content-type': 'application/json', // "AUTHORIZATION": 'jwt ' this.$cookies.get("login-token") //token换成从缓存获取
}, method:'GET',//请求方式，必须为大写
success: response => { console.log(response.data.all_href) this.v_hrefs=response.data.all_href;
}
})
}, delete_link(id) {
axios.post('api/delete_href/', { id: id,
}, { headers: { 'content-type': 'application/json', // "AUTHORIZATION": 'jwt ' this.$cookies.get("login-token") //token换成从缓存获取
}
}).then(res => { if (res.data.status == 200) { this.$message.info('删除成功'); document.location.reload();
} else { let self = this
self.$alert(res.data.error, '删除失败', { confirmButtonText: '确定', callback: action => { // eslint-disable-line no-unused-vars
document.location.reload();
}
})
}
}).catch(err => { this.status_check(err)
})
}
}
}</script><style>
.view_body { display: flex; flex-direction: column; align-items: center; justify-content: center; background: url('https://gimg2.baidu.com/image_search/src=http://c-ssl.duitang.com/uploads/item/202003/15/20200315200108_cbvkf.thumb.400_0.jpg&refer=http://c-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658246359&t=1b069d76bb4fba1da86749c52874ac3d'); width:100%; height:100%; position:fixed; background-size:100% 100%;
} .mydiv { text-align: center; /* background-color: #eaeaea; */
height: 80%; width: 75%;
} .mydiv li { float: left; width: 25%;
} .mya{ display: inline-block; text-decoration: none; color: transparent; background: linear-gradient(to top, black, #fd59f1);
-webkit-background-clip: text; font-size: large;
}</style>- 接收页面使用
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 console.log(option); //打印出上个页面传递的参数。 this.out_src = option.url } - 使用
web-view组件用来承载网页的容器。
<template> <web-view id='out' :src="out_src" ></web-view></template><script>
export default { data() { return { out_src: ''
}
}, onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option); //打印出上个页面传递的参数。
this.out_src = option.url
}
}</script><style></style>- 这样子就可以了，样式可以自己调整。
- 昨天周日公园看别人拍小姐姐了，北京最近好热啊，下一节写微信登录。
