uni-app是什么
uni-app 是一个应用 Vue.js 开发所有前端利用的框架，开发者编写一套代码，可公布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快利用等多个平台。
本文内容
应用 uni-app 这个平台进行开发web利用，语法是Vue.js的。
筹备
1、下载 HBuilder 下载地址：htttps://hx.dcloud.net.cn/
2、创立我的项目
3、开发
代码
pages/index/index.vue
<template> <view class="content"> <ul v-for="reslist in reslists"> <li @click="resinfo(reslist.res_id)"> <view class="res_title">{{reslist.res_title}}</view> <view class="res_category_equal"> <span class="res_category">{{reslist.res_category}}</span> <span class="res_equal">{{reslist.res_equal}}</span> </view> </li> </ul> </view></template><script> export default { data() { return { reslists:'' } }, onLoad() { uni.request({ url: 'http://demo.likeyunba.com/api/reslist/reslist.php', header: { 'header': 'application/json' }, success: (res) => { // 将获取到的后果存入reslists数组 this.reslists = res.data; } }); }, methods: { resinfo:function(res_id){ // 跳转到resinfo页面 uni.navigateTo({ url: '../resinfo/resinfo?res_id=' + res_id }); } } }</script><style> *{ padding: 0; margin: 0; } page{ background: #eee; } .content{ width: 90%; margin:30px auto; } .content ul li{ list-style: none; width: 100%; height: 80px; background: #fff; margin-bottom: 10px; border-radius: 10px; } .content ul li .res_title{ width: 100%; height: 40px; line-height: 50px; font-size: 17px; color: #333; text-indent: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .content ul li .res_category_equal{ width: 100%; height: 40px; line-height: 30px; font-size: 14px; color: #999; text-indent: 15px; } .content ul li .res_category_equal .res_category{ float: left; } .content ul li .res_category_equal .res_equal{ float: left; } .content ul li .res_category_equal .res_creattime{ float: right; font-size: 13px; margin-right: 15px; }</style>pages/resinfo/resinfo.vue
<template> <view class="content"> <view class="res_title">{{resinfo.res_title}}</view> <view class="res_category_equal_creattime"> <span class="res_category">{{resinfo.res_category}}</span> <span class="res_equal">{{resinfo.res_equal}}</span> <span class="res_creattime">{{resinfo.res_creattime}}</span> </view> <view class="res_content">{{resinfo.res_content}}</view> </view></template><script> export default { data() { return { resinfo:'' } }, onLoad(e) { uni.request({ url: 'http://demo.likeyunba.com/api/reslist/resinfo.php?res_id='+e.res_id, header: { 'header': 'application/json' }, success: (res) => { // 将获取到的后果存入resinfo数组 this.resinfo = res.data[0]; } }); } }</script><style> *{ padding: 0; margin: 0; } page{ background: #eee; } .content{ width: 90%; margin:30px auto; } .content .res_title{ width: 100%; margin-top: 15px; font-size: 20px; } .content .res_category_equal_creattime{ width: 100%; height: 30px; line-height: 30px; } .content .res_category{ font-size: 14px; color: #999; float: left; margin-right: 10px; } .content .res_equal{ font-size: 14px; color: #999; float: left; margin-right: 10px; } .content .res_creattime{ font-size: 14px; color: #999; float: right; } .content .res_content{ width: 100%; margin-top: 20px; font-size: 15px; }</style>打包设置
须要返回 manifest.json 这个文件进行设置。具体设置请参考下图：
打包
打包设置实现之后，就能够进行打包。
发动打包之后，零碎就会主动进行编译，这个时候只须要进行期待。
打包实现后，就能够看到一个 static 文件夹和 index.html 文件。
把这些上传到服务器就能够政策拜访。
截图演示
运行成果如图。
线上演示
http://demo.likeyunba.com/uniapp-web-demo/#/
源码
https://likeyun.lanzout.com/iEh0R0pzgaah
作者
TANKING
学习求教：sansure2016