我记住了uni-app的基本用法,但是没有看完实战视频。 也不知道有没有实战技巧。 然后,以2倍速总结了以下技巧。 另外在重构我的“刷词”小程序的过程中可能会有用。 当然因为用的是二倍速,所以只是粗略的记录,我没有真正的实战过……
1、轮播图
轮播图形使用:实现刮水器组件向导组件
视图类='主页'
维珀
si对等项目图像=' ' /图像/交换项目
/swiper
/view官方文档: https://uni app.d cloud.io /组件/交换机
2、写样式用scss
样式语言=' scss '. home{
动力{2}
width: 750rpx;
height:380rpx;
图像{2}
height:100%;
width:100%;
}
}
}
/style
3、封装统一的请求方法
util/api.js常数基本型=' http://本地主机33608080 '
导出一致我的请求=(选项)={
返回新承诺((解决,拒绝)={
uni.request({ ((
URL :基本选项. URL、
method :选项. method|| '获取',
data :选项. data|| { }、
成功: (RES )={
if (数据状态!==0)
return uni.showTitle({ ((
title:“数据获取失败”
() )
}
是解析(RES )
(、
故障: (错误)={
uni.show标题({ }
title:“接口请求失败”
() )
是拒绝(ERR )
}
() )
() )
然后,将定义的方法全局公开。 由于每个页面都可能被使用,因此在main.js上
从我的请求'./util/API.js '
vue.prototype.$ my request=my request然后具体的页面上的调用方法是什么
使用同步getinfos (
const RES=await this.$ my请求({ (
url:'/getInfos ',
data :“id”:“123”是指,
() )
控制台日志(RES;
{ 010 }
4、相同的显示样式要封装成组件
如果多个页面使用相同的部分,请考虑使用组件
5、分页累加用如下格式
this.goods=[ . this.goods, RES.datda.message]6、方法传回调函数做额外操作
a{.
回调| |回调(
}调用时
a ()或
() )={。
停止() )
(
6、地图
官方文档:https://uniapp.dcloud.io/component/map
7、属性的动态绑定
属性只要前面加:就可以动态绑定
<view :goods="goods">8、拨打电话
参考官网:https://uniapp.dcloud.io/api/system/phone
9、可滚动试图区域
<scroll-view></scroll-view>参考官网:https://uniapp.dcloud.io/component/scroll-view
10、点击渲染想人陪的饼干
<view :class="active==index?'active'" v-for="(item,index) in cates"></view>只需要修改active的值就行了,若active的值等于某一项的index则这一项会有active样式
11、对显示数据进行过滤
<view>{{item.time|formatDate}}</view>prop:['list'] filters:{ formatDate(date){ const nDate = new Date(date) const year = nDate.getFullYear() return year+month+day } }也可以在main.js定义一个全局的过滤器
Vue.filter('formatDate',(date)=>{ const nDate = new Date(date) const year = nDate.getFullYear() return year+month+day })这样别的页面就可以直接这样使用了
<view>{{item.time|formatDate}}</view>13、用rich-text富文本组件来解析富文本
参考官网:https://uniapp.dcloud.io/component/rich-text
14、自定义组件的时间传递点击
因为组件抽取成了公共的,所以它的点击事件要传递到父组件才行:用子组件传递到父组件的方式
15、扩展组件
学会用扩展组件,比如时间日期,商品导航
16、变量定义
通常不会跟H5一样定义js变量,都是放到data里面,然后用this来修改内容就可以了
17、打包发布
打包我们需要在manifest.json中配置一些网站图标啊,APP图标啊等信息
微信小程序
这个比较简单,比如微信小程序需要上官网获得appid和配置可信域名
H5打包上传
点击发行到网站-PC web或手机H5即可
安卓打包
都差不多,可能要配置一些证书什么的
总结
视频教程:https://www.bilibili.com/video/BV1BJ411W7pX?p=3&spm_id_from=pageDriver官网:https://uniapp.dcloud.io/
加上百度什么的。。。
后续需要重构我的”炼词”微信小程序啦!