uniapp
文章平均质量分 54
uniapp开发移动端, 例如APP、微信小程序和抖音支付宝等各类小程序的.
前端新手W
这个作者很懒,什么都没留下…
展开
-
使用uniapp开发, 引入腾讯位置服务
一. 获取key登录腾讯位置服务, 进入控制台, 创建应用, 添加Key二. 引入插件包://app.json "mp-weixin":{}"plugins" : { "chooseLocation" : { "version" : "1.0.6", "provider" : "wx76a9a06e5b4e693e" }}三.设置定位授权"permission" : { "scope.userLocation" : {原创 2021-11-01 14:30:33 · 1157 阅读 · 4 评论 -
uniapp动态改变页面窗口标题
uni.setNavigationBarTitle({title: this.title});原创 2021-10-15 11:26:56 · 726 阅读 · 0 评论 -
contacts 模块管理系统通讯录
contacts 模块管理系统通讯录contacts模块管理系统通讯录, 用于可对系统通讯录进行增删改查等操作. 通过plus.contacts获取系统通讯录管理对象文章目录contacts 模块管理系统通讯录一.获取通讯录方法: getAddressBook1.1参数二.常量2.1 手机通讯录 ADDRESSBOOK_PHONE2.2 SIM卡通讯录 ADDRESSBOOK_SIM三.通讯录管理对象 AddressBook3.1 方法:3.1.1 create: 创建联系人3.1.2 find:原创 2021-04-28 16:14:37 · 1710 阅读 · 0 评论 -
Barcode模块管理条码扫描识别
Barcode模块管理条码扫描识别(一维码和二维码)支持常见的一维码(如EAN13码)及二维码(如QR码), 通过调用设备的摄像头对条码进行扫描识别, 扫描到条码后进行解码并返回码数据内容及码类型文章目录Barcode模块管理条码扫描识别(一维码和二维码)一.常量二.方法2.1 scan: 扫码识别图片中的条码2.1.1参数2.2 create: 创建扫码识别控件对象2.2.1参数2.3 getBarcodeById: 查找扫码识别控件对象2.3.1 参数2.4 Barcode 扫码识别控件对象2.原创 2021-04-27 09:56:19 · 2515 阅读 · 3 评论 -
uniapp点击按钮从底部弹出操作菜单
uni.showActionSheetuni从底部向上弹出操作菜单uni.showActionSheet({ itemList: ['A', 'B', 'C'], success: function (res) { console.log('选中了第' + (res.tapIndex + 1) + '个按钮'); }, fail: function (res) { console.log(res.errMsg); }});原创 2021-02-18 15:03:32 · 7634 阅读 · 1 评论 -
uniapp隐藏滚动条的几种方法
在pages.json里设置//app页面不显示滚动条"scrollIndicator": "none"在uniapp的scroll-view组件中隐藏滚动条::-webkit-scrollbar { width: 0; height: 0; background-color: transparent; } html中隐藏滚动条(会导致页面无法滑动)overflow-y:hidden;app-plus隐藏滚动条"app-plus": { "scro.原创 2021-01-13 10:56:14 · 17390 阅读 · 4 评论 -
uniapp上传图片、展示图片、预览图片、长按删除图片
上传图片、展示图片、预览图片、长按删除图片上传图片: uni.chooseImage上传图片之后可以获得文件的临时路径.展示图片: success返回参数中, tempFilePaths为图片的本地文件路径列表, tempFiles为图片的本地文件列表. 展示图片将这些路径放在src中.预览图片: 使用uni.previewImage预览图片, 其中urls接收的是预览图片链接列表.current为当前显示图片的链接/索引值.长按删除图片: 将存放图片的数组或字符串清空实例:<tem原创 2020-12-30 13:42:25 · 3458 阅读 · 0 评论 -
uniapp上拉加载的避坑指南
uniapp上拉加载uniapp的上拉加载和下拉刷新一样都有两个方法, 一个是整体的上拉(生命周期函数onReachBottom), 一个是局部的上拉(基于scrpll-view组件);一.整个页面的上拉(onReachBottom)注意: 使用scroll-view导致页面级没有滚动,则触底事件不会被触发onReachBottom() { //当数组里的数据大于等于total的时候,说明数据已经加载完了 if (this.dataList.length >= this.t原创 2020-12-23 17:11:22 · 4344 阅读 · 2 评论 -
uniapp下拉刷新避坑指南
uniapp下拉刷新uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件.一.整个页面的刷新(onPullDownRefresh)在js中定义onPullDownRefresh处理函数(和onLoad等生命周期函数同级), 监听该页面用户下拉刷新事件.使用步骤需要在pages.json里, 找到当前页面的pages接点, 并在原创 2020-12-23 17:09:46 · 18261 阅读 · 3 评论 -
使用uni.$emit()和uni.$on()进行页面间通讯
监听事件:// 页面a onLoad(){ // 监听事件 uni.$on('upData',(e)=>{ this.a = e.a; this.b = e.b; }) }, onUnload() { // 移除监听事件 uni.$off('upData'); },因为事件监听是全局的,所以使用 uni.$on ,需要使用 uni.$off 移除全局的事件监听,避免重原创 2020-12-21 13:12:04 · 1590 阅读 · 0 评论 -
uniapp局部的下拉刷新以及组件出现的问题
局部的下拉刷新文章目录局部的下拉刷新一.scroll-view实例二.属性说明:三.出现的问题一.scroll-view实例可滚动视图区域, 用于区域滚动. 区域滚动的性能不及页面滚动<scroll-view class="scroll" scroll-y="true" :refresher-enabled='refresherEnabled' @refresherpulling="onPulling"原创 2020-09-28 17:03:42 · 5432 阅读 · 6 评论 -
label-标签组件
label用来改进表单组件的可用性, 使用for属性找到对应的id, 或者将控件放在该标签下, 当点击时, 就会触发对应的控件.可以绑定的控件有: , , , 属性for: 绑定控件的id<checkbox-group> <checkbox value="v1" id="v1">选中</checkbox><checkbox value="v2" id="v2">未选中</checkbox></check原创 2020-08-13 10:00:55 · 941 阅读 · 0 评论 -
uniapp滚动选择器 picker
从底部弹起的滚动选择器 picker支持五种选择器, 通过mode来区分, 分别是普通选择器(selector), 多列选择器(multiSelector), 时间选择器(time), 日期选择器(date), 省区选择器(region), 默认是普通选择器一. 普通选择器(selector)mode = selector属性:range(Array/Array): mode为selector或multiSelector时, range有效range-key: 当range是一个原创 2020-08-13 09:59:43 · 14117 阅读 · 0 评论 -
uniapp滑动选择器 slider
滑动选择器 slider属性说明min: 最小值max: 最大值step: 步长, 取值必须大于0, 并且可被(max - min)整除disabled: 是否禁用value: 当前取值activeColor: 滑块左侧已选择部分的线条颜色backgroundColor: 滑块右侧背景条的颜色block-size: 滑块的大小, 取值范围为12 - 28block-color: 滑块的颜色show-value: 是否显示当前value@change: 完成一次拖动后触发的事件@c原创 2020-08-13 09:57:40 · 6332 阅读 · 1 评论 -
单项选择器radio-group
单项选择器 radio-group内部由多个组成. 通过把多个包裹在一个下, 实现radio的单选@change:选中项改变时触发value: radio的标识, 选中时触发chang事件, 会携带的value值disabled: 是否禁用, 默认为falsechecked: 当前是否选中, 可用来设置默认选中color: radio的颜色, 同css的颜色调节CheckBox的大小:在css中使用transform:scale(num)<!-- 单选原创 2020-08-12 16:54:46 · 10314 阅读 · 0 评论 -
uniapp多项选择器-checkbox-group
多项选择器多项选择器内部由多个checkbox组成@change: 选中项改变时触发value: checkbox的表示, 选中时触发chang事件, 会携带的value值disabled: 是否禁用, 默认为falsechecked: 当前是否选中, 可用来设置默认选中color: checkbox的颜色, 同css的颜色调节CheckBox的大小:在css中使用transform:scale(num)<template> <view> <!--原创 2020-08-12 16:51:53 · 8322 阅读 · 0 评论 -
uniapp实现微信登录或者QQ登录
uniapp实现微信登录或者QQ登录无论是哪种登录, 都要用到uni.login一. 获取服务供应商在实现登录前,先查看一下可以使用哪种方式登录. 在APP平台, 可用的服务商, 是打包环境中配置的服务商, 与手机端是否安装了该服务商的APP没有关系uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.provider); }});servic原创 2020-08-06 13:39:34 · 6287 阅读 · 0 评论 -
uniapp实现获取验证码倒计时
获取验证码倒计时<view class="getNum" @click="getNum" v-show="numShow"> 获取验证码</view><view class="Num" v-show="!numShow"> {{num}}s</view>data(){ return { //控制文字和数字的显隐性 numShow:true }}getNum: function ()原创 2020-08-06 09:36:52 · 1195 阅读 · 0 评论 -
uniapp关闭默认title
uniapp关闭默认title在pages.json 的 pages中, 找到对应的页面的style, 输入下边代码"style" : { "navigationStyle": "custom", "app-plus": { "titleNView": false }}原创 2020-08-06 09:33:52 · 2423 阅读 · 0 评论 -
uniapp实现上拉加载和下拉刷新
下拉刷新onPullDownRefresh需要先在pages.json中开启下拉刷新//在pages.json中找到需要开启的页面. 在style中输入"enablePullDownRefresh": true,开启下拉刷新之后, 下拉对应的页面就会出现下拉的动画, 但是动画不会自动关闭, 所以手动关闭onPullDownRefresh () { //刷新初始化数据 this.size = 10 this.current = 1 //调用获取数据的函数原创 2020-08-05 10:39:44 · 2591 阅读 · 0 评论 -
uniapp路由和页面的重定向
uniapp路由跳转原创 2020-08-05 09:59:28 · 13614 阅读 · 3 评论 -
uniapp的生命周期函数
uniapp生命周期函数原创 2020-08-05 09:57:08 · 1414 阅读 · 0 评论 -
uniapp实现全局变量的几种方法
全局变量的实现方式一. 本地存储将数据存储在本地缓存中指定的key中. 具体内容参考uniapp本地存储二. 公用模块定义一个专用的模块, 用来组织和管理这些全局的变量, 在需要的页面引入.1. 在根目录下创建common目录, 然后在common目录下新建helper.js用于定义公用的方法.comst siteUrl = 'http://...';export default { siteUrl}2. 在index.vue中引用该模块维护比较方便, 但是每次都需要原创 2020-08-04 17:51:30 · 4886 阅读 · 0 评论 -
uniapp父子组件之间传值
组件传值一. 父组件向子组件传值通过props来实现, 子组件通过props来接收父组件传过来的值父组件// 1. 引入子组件import zi from '../../components/zi.vue'// 2. 在components中对子组件进行注册export default { components:{ zi } }<!-- 以标签的形势载入; 通过数据绑定的形势进行传值 --><zi :userInfo="张三"><原创 2020-07-15 15:48:17 · 12317 阅读 · 2 评论 -
uniapp页面之间传值
页面传值如果数据仅在跳转和被跳转页面中传递, 可以在跳转时传递数据. 如果数据需要多个页面使用, 可以采用本地存储处理数据一. uni.navigateTOurl有长度限制, 太长的字符串会传递失败这里列举一个例子, 其他几个路由跳转传递参数的方法和这个相同//从此页面跳转到test页面并传递两个参数uni.navigateTo({ url:'test?id=123&name=张三'})//在test页面接收参数export default { onL原创 2020-07-15 11:07:04 · 3860 阅读 · 0 评论 -
uniapp本地存储
uniapp本地存储vue的本地存储方式, 小程序在浏览器测试时也可以实现, 但是在真机运行时不能实现文章目录uniapp本地存储一. 存储二. 获取三. 移除一. 存储uni.setStorage(OBJECT)将数据存储在本地缓存中指定的key中, 会覆盖掉原来该key对应的内容, 这是一个异步接口OBJECT参数参数名类型必填说明keyString是本地缓存中的指定的 keydataAny是需要存储的内容,只支持原生类型、及能够通原创 2020-07-15 10:41:45 · 15687 阅读 · 2 评论 -
uni-app创建项目
一. uni-app的特点一套代码多个平台uni-app使用vue.js开发所有前端应用的框架, 开发者编写一套代码, 可发布到IOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台.二. 所编写的软件官方推荐HBuilderXHBuildr官方IDE下载地址HBuilderX是通用的前端开发工具, 为uni-app做了特别强化, 安装相应的插件也比较方便.三. 创建 运行项目创建项目点击新建 => 项目 =>原创 2020-07-13 10:37:02 · 1287 阅读 · 0 评论