文章目录
根据 Uni-App从入门到实战-黑马程序员杭州小区出品 视频所总结的笔记。
视频地址：https://b23.tv/MercjWo
使用工具：HbuildX 微信开发者工具
1.创建项目，选择uniapp
2.填写项目名称和选择路径。
3.启动项目：
注意：微信小程序需要设置如下
层级分配：
https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle
1.配置全局样式。
2.常用的配置属性：
"globalStyle": {
"navigationBarTextStyle": "black", //导航栏字体颜色,只有black/white
"navigationBarTitleText": "小程序app",//导航默认标题
"navigationBarBackgroundColor": "#f1c40f", //导航栏背景颜色
"backgroundColor": "#F8F8F8" ,//下拉出来的背景颜色
//"navigationStyle":"custom", //去除默认导航栏
"enablePullDownRefresh":true, //开启下拉刷新
"backgroundTextStyle":"light" //下拉刷新样式
}
https://uniapp.dcloud.net.cn/collocation/pages.html#style
配置页面读取路径(相当于vue中的路由)。
h5(搜索)：配置编译到 H5 平台时的特定样式
"pages": [
{
"path": "pages/message/message", //路径
"style": {
"navigationBarTitleText": "信息页", //导航标题
"navigationBarBackgroundColor": "#007AFF", //导航颜
"onReachBottomDistance":200, //配合页面处理事件，默认50
"h5": {
"pullToRefresh": { // 下拉刷新配置
"color": "#5352ed" //下拉刷新样式颜色
}
}
}
} ,{
"path": "pages/contact/contact",
"style": { //页面中配置项会覆盖 globalStyle 中相同的配置项
"navigationBarTitleText":"内容页面"
}
}
],
https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
"tabBar": { //最少两个最多5个
"color": "#eccc68", //tab上文字颜色
"selectedColor": "#2f3542", //选中时的文字颜色
"borderStyle": "white", //上边框的颜色，可选值 black/white
"backgroundColor": "#ced6e0", //tab背景颜色
//"position":"top", //tab位置 (bottom、top) 仅支持微信小程序
"list": [ //list列表，最少两个最多5个
{
"text": "信息页", //图标下文字
"pagePath": "pages/message/message", //路径
"iconPath": "static/tabs/message.png", //未选中时的图标(不支持网络图片，不支持字体图标)
"selectedIconPath": "static/tabs/message-active.png" //选中时的图标
},
{...},
{...}
]
}
https://uniapp.dcloud.net.cn/collocation/pages.html#condition
"condition": { //启动模式配置，仅开发期间生效，用于模拟直达页面的场景
"current": 0, //激活的list索引
"list": [ //启动模式列表
{
"name": "详情页", //启动模式名称
"path": "pages/detail/datail", //路径
"query": "id=80" //(选配)启动参数，可在页面的 onLoad 函数里获得
}
]
}
https://uniapp.dcloud.net.cn/component/view.html
<view class="box" hover-class="boxHover" hover-stay-time="50">
//点击时添加的类 该类多久移除
<view class="item" hover-class="itemHover" hover-stop-propagation="true">111</view>
//是否取消冒泡
</view>
<!-- scroll-view滚动标签 -->
<!-- 横向滚动 -->
<scroll-view scroll-x scroll-left="150"> //开启x轴滚动，滚动条初始距离为150px
<view class="scrOut">
<view class="scrBox">111</view>
<view class="scrBox">222</view>
<view class="scrBox">333</view>
<view class="scrBox">444</view>
</view>
</scroll-view>
<!-- 纵向滚动 -->
<scroll-view class="scoll2" scroll-y scroll-top="150"> //开启y轴滚动，滚动条初始距离为150px
<view>
<view class="scrBox2">111</view>
<view class="scrBox2">222</view>
<view class="scrBox2">333</view>
<view class="scrBox2">444</view>
</view>
</scroll-view>
https://uniapp.dcloud.net.cn/component/swiper.html
<!-- swiper轮播图组件 -->
<swiper class="banner"
indicator-dots //是否显示面板指示点
indicator-color="#00000090" //指示点颜色
indicator-active-color="#fff" //当前选中的指示点颜色
autoplay //是否自动切换
interval="1000" //自动切换时间间隔，默认5000
circular //是否采用衔接滑动
previous-margin="20" //前边距
next-margin="20" //后边距
>
<swiper-item>
<image src="/images/banner1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/banner2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/banner3.jpg"></image>
</swiper-item>
</swiper>
https://uniapp.dcloud.net.cn/component/icon.html
<text selectable space="ensp" decode>你 \n 好</text>
selectable ：是否可选;
space：编码格式;
decode：识别转义字符
<view style="padding: 50px; text-align: center;">
<icon type="success" size="100"></icon>
<view>提交成功，感谢你的配合！</view>
</view>
<view style="padding: 50px;">
<progress
percent="60" 百分比0~100
show-info 在进度条右侧显示百分比
border-radius="10" 圆角大小
font-size="15" 右侧百分比字体大小
activeColor="skyblue" 已选择的进度条的颜色
backgroundColor="#ccc" 未选择的进度条的颜色
active 进度条从左往右的动画
bindactiveend="wancheng" 动画完成事件
></progress>
</view>
https://uniapp.dcloud.io/component/rich-text.html
<rich-text :nodes="datail.content"></rich-text>
https://uniapp.dcloud.net.cn/component/button.html
<view class="mybox1">
<button type="primary" plain>登入</button> //按钮样式 按钮是否镂空，背景色透明
<button>退出登入</button>
<button type="warn" size="mini" disabled>支付</button> //按钮大小 禁用按钮
<button loading>加载中</button> //出现加载中图标
<button open-type="contact">联系客服</button> //跳转到联系客服功能
</view>
<checkbox value="0" checked="true" disabled />选中
<checkbox value="1" color="blue" />未选中
<radio-group>
<radio></radio>男
<radio></radio>女
</radio-group>
<form catchsubmit="formSubmit">
<input class="ipt" placeholder="请输入用户名" type="text" focus cursor-spacing="100" />
<button form-type="submit">提交</button>
<switch checked></switch>
</form>
.ipt {
border: 1px solid #ddd;
height: 70rpx;
padding: 0 10px;
box-sizing: border-box;
}
https://uniapp.dcloud.net.cn/component/image.html
<image class="img1" src="/images/bg2.jpg"></image>
<!-- /表示根路径 -->
<image src="/images/blog.jpg" mode="widthFix" show-menu-by-longpress></image>
//等比缩放，宽度完全显示 //长按可发送好友
<image src="/images/blog.jpg" mode="center"></image>
//不缩放，取中间一块
mode=“heightFix” 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
“widthFix” 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
https://uniapp.dcloud.net.cn/component/map.html
<map class="map"
:longitude="longitude"
:latitude="latitude"
:markers="markers"></map>
data() {
return {
longitude: 116.4693, //经度
latitude: 39.927666, //纬度
scale: 11, //放大比例
markers: [{
longitude: 116.4693, //图片的经度
latitude: 39.927666, //图标的纬度
iconPath: '../../static/hmlogo.png', //图标路径
width: 30, //图标宽度
height: 30 //图标高度
}]
}
},
https://uniapp.dcloud.net.cn/component/navigator.html
<view>
<navigator class="link" url="/pages/logs/logs">跳转到日志</navigator>
//关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
<navigator class="link" url="/pages/logs/logs" open-type="redirect">关闭当前页面跳转到日志</navigator>
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
<navigator url="/pages/demo/demo" open-type="switchTab" >跳转到demo2</navigator> //不能传参
//关闭所有页面，打开到应用内的某个页面
<navigator class="link" url="/pages/logs/logs" open-type="reLaunch">关闭所有页面跳转到日志</navigator>
</view>
https://uniapp.dcloud.net.cn/api/router.html#navigateto
uni.navigateTo(Object object)
//保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。。但是不允许跳转到 tabbar 页面，路径后可以带参数。
uni.redirectTo(Object object)
//关闭当前页面，跳转到应用内的某个页面。
//跳转的应用内非 tabBar 的页面的路径，路径后可以带参数
uni.switchTab(Object object)
//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。不能传参
uni.reLaunch(Object object)
//关闭所有页面，打开到应用内的某个页面
uni.navigateBack(Object object)
//返回上一级页面
<button type="primary" @click="goDetail">跳转到详情页</button>
<button type="primary" @click="goMessage">跳转到tabBar页</button>
goDetail(){
uni.navigateTo({
url:'/pages/detail/datail?id=1'
})
},
goMessage(){
uni.switchTab({
url:'/pages/message/message'
})
}
//返回上一级
uni.navigateBack({
delta:1,//返回层数，2则上上页
})
// 传递：
<navigator url="/pages/detail/datail?id=80&name=yrh">跳转到详情页</navigator>
// 接收：
onLoad(options) { //监听页面加载
console.log('路由参数',options) //{"id":"80","name":"yrh"}
},
教程—>页面—>生命周期
https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle
https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
onPullDownRefresh() {
console.log("页面刷新了")
// 初始化数据
this.pageindex = 1
this.goods = [],
this.flag = false
setTimeout(() => {
this.getGoodsList(); // 再次发送请求
uni.stopPullDownRefresh(); //关闭刷新动画
}, 500);
},
开启下拉刷新：uni.startPullDownRefresh()
关闭下拉刷新：uni.stopPullDownRefresh();
onReachBottom(){
if(this.goods.length<this.pageindex*10){
console.log('页面触底了')
return this.flag = true //显示触底提示，停止发送请求
}
this.pageindex++
this.getGoodsList() //重新获取数据
//追加：this.goods = [...this.goods,...res.data.message]
},
通过给pages.json文件配置："onReachBottomDistance": 200 //定义触发时刻
API->网络->发起请求： https://uniapp.dcloud.net.cn/api/request/request.html
get(){
uni.request({
url:'http://localhost:8082/api/getlunbo',
success(res){
console.log(res)
}
})
}
API->数据缓存：https://uniapp.dcloud.net.cn/api/storage/storage.html#setstorage
<button type="primary" @click="setStorage">存储数据</button>
<button type="primary" @click="getStorage">获取数据</button>
<button type="primary" @click="removeId">移除id</button>
setStorage(){
// 异步存储
// uni.setStorage({
// key:'id',
// data:80,
// success(){
// console.log('存储成功')
// }
// })
// 同步存储
uni.setStorageSync('id',100)
},
getStorage(){
// 异步获取
// uni.getStorage({
// key:'id',
// success(res){
// console.log('获取成功：',res)
// //{"data":100,"errMsg":"getStorage:ok"}
// }
// })
//同步获取
const res = uni.getStorageSync('id')
console.log(res) //100
},
removeId(){
// 异步删除
// uni.removeStorage({
// key:'id',
// success(){
// console.log('删除成功')
// }
// })
// 同步删除
uni.removeStorageSync('id')
}
https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject
<button type="primary" @click="chooseImg">上传图片</button>
chooseImg(){
uni.chooseImage({
count:5,
success:res=>{
this.imgArr = res.tempFilePaths
console.log(this.imgArr)
}
})
},
https://uniapp.dcloud.net.cn/api/media/image.html#unipreviewimageobject
<image
v-for="(item,index) in imgArr"
:key="index"
:src="item"
@click="@click="previewImg(item.img_url)""></image>
previewImg(current){
// 获取图片路径列表
const urls = this.secondDate.map(item=>{
return item.imgUrl
})
uni.previewImage({ // 开启预览
//current为当前显示图片的链接/索引值，
//不填或填写的值无效则为urls的第一张
current,
urls:this.imgArr ,//需要预览的图片链接列表
indicator:"number", //底部圆点显示（只支持app）
loop:true, //循环模式（只支持app）
})
}
https://uniapp.dcloud.net.cn/api/system/phone.html
拨打电话：uni.makePhoneCall({phoneNumber:'10086'})
教程->编译器->条件编译处理多端差异
https://uniapp.dcloud.net.cn/tutorial/platform.html#%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9
<!-- #ifdef H5 -->
<view>我希望只在h5页面中看见</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我希望只在微信小程序中看见</view>
<!-- #endif -->
components->test.vue
组件的使用：
https://uniapp.dcloud.net.cn/tutorial/page-component.html
<test></test>
import test from '../../components/test.vue'
components:{test},
组件的传参：
父传子：props
子传父：
子组件中：
<button @click="sendNum">给父组件传值</button>
sendNum(){
this.$emit('myEven',this.num)
}
父组件中：
<son @myEvent="getNum"></son>
getNum(num){
console.log(num)
}
兄弟组件之间的传参：b组件给a组件传参
(全局事件总线)
在a组件中:
created(){
uni.$on('updateNum',num=>{
this.num += num;
})
}
在b组件中：
<button @click="addNum">修改b组件数据</button>
addNum(){
uni.$emit('updateNum',10)
}
https://uniapp.dcloud.net.cn/api/ui/prompt.html
uni.showToast(OBJECT)
https://uniapp.dcloud.net.cn/component/uniui/quickstart.html
1.找到对应组件库，使用HBuilderX导入。(需要登录HBuilderX)
2.找到官方文档直接使用。
https://uniapp.dcloud.io/component/uniui/uni-goods-nav.html
<uni-goods-nav
:fill="true" //按钮是否平铺
:options="options" //左侧样式
:buttonGroup="buttonGroup" //右侧按钮样式
@click="onClick" //点击左侧三个按钮触发(客服，店铺，购物车)
// 通过e.index区分。
@buttonClick="buttonClick" //点击右侧两个按钮触发(加入购物车，立即购买)
/>
rpx：响应式px，以750宽的屏幕为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx会等比放大。
style中导入外部样式：
<style>
@import url("./a.css");
....
</style>
字体文件的引入：
1.修改下载好的iconfont.css文件
2.在App.vue中全局引入
<style>
/*每个页面公共css */
@import url("static/fonts/iconfont.css");
</style>
3.在任意.vue文件中使用
<view class="iconfont icon-shipin"></view>
注意：
1.在uni-app中不能使用 * 选择器。
2.page相当于body节点。
3.style中默认使用了scoped，App.vue除外。
4.字体文件不能大于或等于40kb，否则不生效。
格式化代码：alt + shift + F
我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie
当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？
目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称
我正在使用Postgres.app在OSX(10.8.3)上。我已经修改了我的PATH，以便应用程序的bin文件夹位于所有其他文件夹之前。Rammy:~phrogz$whichpg_config/Applications/Postgres.app/Contents/MacOS/bin/pg_config我已经安装了rvm并且可以毫无错误地安装pggem，但是当我需要它时我得到一个错误:Rammy:~phrogz$gem-v1.8.25Rammy:~phrogz$geminstallpgFetching:pg-0.15.1.gem(100%)Buildingnativeextension
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现
遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
我的测试尝试访问网页并验证页面上是否存在某些元素。例如，它访问http://foo.com/homepage.html并检查Logo图像，然后访问http://bar.com/store/blah.html并检查页面上是否出现了某些文本。我的目标是访问经过Kerberos身份验证的网页。我发现Kerberos代码如下:主文件uri=URI.parse(Capybara.app_host)kerberos=Kerberos.new(uri.host)@kerberos_token=kerberos.encoded_tokenkerberos.rb文件classKerberosdefini
文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具，用来对区块链系统进行各种管理操作。但是对于初学者来说，还是可视化界面更友好，本节就来介绍WeBASE管理平台，这是一款微众银行开源的自研区块链中间件平台，可以降低区块链使用的门槛，大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行，在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设，一定
TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是