uni-app一端开发实现微信小程序，H5，安卓端开发

最近闲来没事使用uni-app给自己写个小程序，又想上到H5，跟安卓上所以就开始捣鼓了，看官网挺简单的。就是vue+微信小程序的结合体；so开始…
首先下载个HBuilderX下载地址；然后去登录没有登录的话去注册个。
开始
选择uni-app，选择默认，我选的是默认，创建就好了

上一段代码首页的吧

HTML:

<view class=“homeLi” v-for="(item,index) in lists" :key=‘index’ v-if="index%2=0" @tap=“goTOdetail(item)”>

{{item.name}}
{{item.barCode=‘001’?‘美甲’:‘美睫’}}

<view class=“homeLi height420” v-if="index%2=1" v-for="(item,index) in lists" :key=‘index’ @tap=“goTOdetail(item)”>

{{item.name}}
{{item.barCode=‘001’?‘美甲’:‘美睫’}}

{{msg}}

JS
import {$http} from ‘…/…/static/js/commonApi.js’ //统一请求配置
export default {
data() {
return {
pages:{
page:1,
pageSize:10
},
lists:[],
msg:‘上拉加载更多’
}
},
onLoad() { //页面加载
this.query(this.pages);
},
methods: {
query(pages){//数据的请求
this.msg = ‘加载中’;
KaTeX parse error: Expected 'EOF', got '}' at position 294: …停止 }) }̲, goTOdeta…{item.id}`
})
}
},
onPullDownRefresh() {//下来加载
this.lists = [];
this.pages.page = 1;
this.query(this.pages);
},
onReachBottom() {//上拉刷新console.log(111111111111)
this.query(this.pages);
}
}
CSS:
.home {width: 750upx;overflow-x: hidden;background: #f2f2f2;}
.homeUl{width: 100%;display: flex;flex-wrap: wrap;padding: 0 10upx;padding-top: 10upx;}
.homeUlBox{width:360upx;margin-right:10upx;}
.homeUlBox:last-child{margin-right: 0;}
.homeLi{width: 100%;height: 400upx;background: #ffffff;margin-bottom: 10rpx;border-radius: 6upx;}
.homeLi image{width: 100%;display: block;height: 250upx;}
.homeLi>view{width: 100%;height: 150rpx;padding: 10rpx;box-sizing: border-box;}
.homeLiMsg_h5{width: 100%;height:96upx;line-height: 48upx;font-size: 30upx;color: #303030;overflow: hidden; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.homeLiMsg_span{width: 100%;font-size: 28upx;color: #007AFF;text-align: right;}
.height420:first-child{height: 420upx;}
.homeMsg{width: 100%;display: flex;justify-content: center;align-items: center;font-size: 32upx;line-height: 48rpx;color: #C0C0C0;}

这下看看配置吧H5

H5就可发布成功了

小程序
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190717145231562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20xODU2NTg5MDMwNg==,size_16,color_FFFFFF,t_70

微信小程序直接在开发工具发布就行以前的小程序怎么发布就怎么发布

安卓

那么三端就好了看看效果吧
H5的

小程序的

安卓的

因为从来没弄过ios所以不弄了，官网上说是看样的，所以有详细Ios配置的看样评论出来。拜谢大佬

uni-app一端开发实现微信小程序，H5，安卓端开发相关推荐

APP自动化_操作微信小程序/H5页面实现自动化_多终端并行
APP自动化_混合App自动化理论相关原理:本质是混合app,应该用切入webview的方法去自动化web页面. 现状:目前由于技术原因无法切到webview中做自动化. 方案:采用原生app自动方 ...
基于云开发的微信小程序-miNi相册（开发环境介绍与登录）
首先安装Node.js 注册一个小程序拿到一个appidhttps://mp.weixin.qq.com/cgi-bin/wx 有兴趣弄代码管理的可以https://git.weixin.qq.com ...
一款功能强大的客户端研发助手，适用于 iOS 、Android、微信小程序！移动端开发必备...
热文推荐: 尘埃落定!清华才子王垠加入华为职级22,前阿里P10赵海平加入字节跳动,职级或为4+ 百度网盘"破解版",Pandownload开发者被抓 DoraemonKit 简称 ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
开发一个微信小程序/APP一般需要多少时间，多少钱？
开发一个微信小程序/APP一般需要多少时间,多少钱? 微信小程序/APP开发的工期和费用估算需视功能需求的多少和难易程度而定,需求不明的情况下很难给出恰当评估. 在湃点网络定制平台,一对一的专业的顾问 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序蓝牙模块BLE开发说明基础知识
微信小程序蓝牙模块说明一.简介微信小程序作为轻量级应用的载体,确实方便了很多的应用场景.传统的产品如果要和手机互联互通,那么必须要开发两套APP,即IOS和安卓.十分的麻烦和成本巨高.但是微信小程 ...
全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 复制代码 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位 ...
基于云开发的微信小程序：个人相册ByUestcXiye
基于云开发的微信小程序:个人相册ByUestcXiye 作业要求第一次作业第二次作业结课作业小程序开发入门开发前的准备注册微信小程序新建一个模板小程序开通云开发服务第一次作业参考资 ...
从0到一开发微信小程序（2）——开发第一个小程序
文章目录其他相关文章 1.创建项目 2.小程序代码目录介绍 2.1.描述整体的app.* 2.2.描述各自页面的pages下面的目录其他相关文章从0到一开发微信小程序(1)--申请账号并安装开发 ...

uni-app一端开发实现微信小程序，H5，安卓端开发

uni-app一端开发实现微信小程序，H5，安卓端开发相关推荐

最新文章

热门文章