微信小程序/uniCloud
微信小程序开发
疆~
这个作者很懒,什么都没留下…
展开
-
uniapp微信小程序提交审核
地址:https://mp.weixin.qq.com/wxopen/initprofile?action=index&token=1798456012&lang=zh_CN原创 2021-10-06 16:49:10 · 590 阅读 · 0 评论 -
uniapp获取用户信息
<template> <view> <button @click="handleGetUserInfo">登录</button> <image :src="userInfo.avatarUrl"></image> {{ userInfo.city }}-{{ userInfo.country }}-{{ userInfo.province }}-{{ userInfo.nickName }}-{{ userInfo.ge.原创 2021-10-06 14:38:41 · 1507 阅读 · 2 评论 -
uniapp+koa+mongoose增删改查,ssl
购买地址:阿里云通用售卖https://common-buy.aliyun.com/?spm=5176.13785142.commonbuy2container.9.73fd778b1eYUYI&commodityCode=cas_dv_public_cn&request=%7B%22ord_time%22:%221:Year%22,%22order_num%22:1,%22product%22:%22free_product%22,%22certCount%22:%2220%22%7D原创 2021-10-04 14:41:22 · 1854 阅读 · 0 评论 -
unicloud入门示例
查看appid:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1973888604&lang=zh_CN版本管理:https://mp.weixin.qq.com/wxamp/wacodepage/getcodepage?token=1973888604&lang=zh_CN服务空间:https://unicloud.dcloud.net.cn/homepages/index/index.vue..原创 2021-09-24 01:11:41 · 1962 阅读 · 0 评论 -
unicloud中上传图片
addImage/index.js:'use strict';const db = uniCloud.database()exports.main = async (event, context) => { const collection = db.collection('tableImages') //云数据库里的表名 ,记录上传图片到云存储后返回的fileID const res = await collection.add(event) //event为客户端上传的参数...原创 2021-06-26 01:10:44 · 3210 阅读 · 1 评论 -
uniapp中的progress进度条
官方示例:https://uniapp.dcloud.io/component/progress效果图:实现代码:<template> <view> <progress :percent="pgList[0]" show-info stroke-width="3" /> <br> <view style="display: flex;"> <progress :percent="pgLis原创 2021-03-08 13:05:25 · 9635 阅读 · 0 评论 -
uniapp中的scroll-view滚动条
官方示例:https://uniapp.dcloud.io/component/scroll-view效果图:实现代码:<template> <view> <scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 300rpx;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" scroll-with原创 2021-03-08 12:54:05 · 10729 阅读 · 4 评论 -
uniapp中的组件通讯($emit和$on)
效果图:实现代码:bus.jsimport Vue from 'vue'export default new Vue()component-communication.vue:<template> <view> <page-head title="组件通讯示例"/> <reciver></reciver> <sender></sender>原创 2021-03-07 00:41:12 · 2845 阅读 · 0 评论 -
uniapp中使用GlobalData和Vuex
效果图:实现代码:<template> <view> globalData中text的值: {{ gd.test }} <button type="primary" @click="setGD()">修改上述值为123</button> vuex中hasLogin的值: {{ testvuex }} <button @click="setVUEX(true)">修改上述值为true</button>原创 2021-03-07 00:19:56 · 2286 阅读 · 0 评论 -
uniapp中的生物认证(指纹、人脸识别)
效果图:实现代码:<template> <view> <button @click="checkIsSupportSoterAuthentication">检查支持的认证方式</button> <button type="primary" @click="checkIsSoterEnrolledInDeviceFingerPrint">检查是否录入指纹</button> <button @click="原创 2021-03-06 23:52:21 · 4017 阅读 · 1 评论 -
uniapp中实现扫码功能
效果图:实现代码:<template> <view> <view v-if="result">{{ result }}</view> <button type="primary" @click="scan">扫一扫</button> </view></template><script>export default { data() { return { ..原创 2021-03-06 23:44:20 · 4370 阅读 · 0 评论 -
uniapp中的picker选择器
目录一、普通选择器二、多列选择器三、时间选择器四、日期选择器一、普通选择器<template> <view> <picker @change="bindPickerChange" :value="index" :range="array" range-key="name"> <view style="padding: 20rpx;background-color: white;">{{ array[index]..原创 2021-03-06 21:49:57 · 21075 阅读 · 5 评论 -
uniapp中拍摄图片/录制视频并保存到本地设备
效果图:代码实现:<template> <view> <view class="uni-padding-wrap"> <view v-if="imagePath !== ''"> <image mode="widthFix" :src="imagePath" /> </view> <button type="primary" @click="saveImage">拍摄图片并保存到原创 2021-03-06 21:20:50 · 5468 阅读 · 8 评论 -
uniapp中获取当前设备的经纬度(定位)
效果图:实现代码:<template> <view> <block v-if="hasLocation === false">未获取</block> <block v-if="hasLocation === true"> <text>E: {{ location.longitude[0] }}°{{ location.longitude[1] }}′</text> <text>原创 2021-03-06 20:30:29 · 3554 阅读 · 1 评论 -
uniapp中搜索地址名获取其经纬度
效果图:实现代码:<template> <view> <block v-if="hasLocation === false"> 未选择位置 </block> <block v-if="hasLocation === true"> 地点:{{locationAddress}} <text>\n经度: {{location.longitude[0]}}°{{location.longitud原创 2021-03-06 19:57:32 · 1576 阅读 · 1 评论 -
uniapp中根据经纬度展示地点
效果图:注意:这里有个问题,就是这个经纬度必须在最开始的时候就指定,后面如果动态地修改经纬度是定位不了的。实现代码:<template> <view> 经度: <uni-easyinput v-model="longitude" /> 纬度: <uni-easyinput v-model="latitude" /> <button type="primary" @click="openLocation()">原创 2021-03-06 19:26:47 · 1866 阅读 · 0 评论 -
uniapp中设置TabBar
效果图:结构目录:pages.json:{ "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": false } }, { "path":原创 2021-03-06 17:59:58 · 9889 阅读 · 3 评论 -
uniapp中页面跳转和传参
效果图:代码实现:结构目录:pages.json:{ "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": false } }, { "原创 2021-03-06 16:03:56 · 3534 阅读 · 0 评论 -
uniapp下拉刷新和触底
效果图:代码实现:结构目录:pages.json:index.vue:<template> <view> <view v-for="(item, index) in list" :key="index">{{ item }}</view> <button @click="pullDown">点击下拉刷新</button> <button @click="reset">重置&原创 2021-03-06 11:36:52 · 2286 阅读 · 0 评论 -
uniapp改变标题栏文字和颜色,跳转页面各种方式
改变标题栏的文字:uni.setNavigationBarTitle({ title: "新的导航栏标题"})改变标题栏前景色和背景色:uni.setNavigationBarColor({ frontColor: "#ffffff", backgroundColor: "#007AFF"})页面跳转://跳转新页面,并传递数据 uni.navigateTo({ url: 'new-page/new-vue-page-1?data=Hello'..原创 2021-03-06 11:10:56 · 2778 阅读 · 0 评论 -
uniapp接口-uni.showActionSheet 从底部向上弹出操作菜单
官方示例:https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet效果图:代码实现:<template> <view><button @tap="actionSheetTap">弹出action sheet</button></view></template><script>export default { data() { ret原创 2021-03-05 12:24:50 · 10203 阅读 · 8 评论 -
uniapp组件-uni-forms表单
效果图:代码实现:<template> <view> <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"> <uni-group title="基本信息" top="0"> <uni-forms-item name="name" required label="用户原创 2021-03-04 12:59:38 · 29891 阅读 · 9 评论 -
uniapp组件-uni-drawer抽屉
官方示例:https://ext.dcloud.net.cn/plugin?id=26抽屉式导航,用于展示侧滑菜单,侧滑导航。例1:这里的width属性可能会失效,具体参见官方示例<template> <view> <button @click="showDrawer" type="primary">左侧弹出 显示Drawer</button> <uni-drawer ref="showLeft" :width="32原创 2021-03-03 01:31:37 · 6869 阅读 · 4 评论 -
uniapp组件-uni-swipe-action滑动操作
目录一、基本用法二、使用变量控制SwipeAction的开启状态三、swipe-action 列表官方示例:https://ext.dcloud.net.cn/plugin?id=181禁止左右滑动,只需要在uni-swipe-action-item组件的属性上添加:disabled="true"即可一、基本用法1、直接使用组件<template> <view> <uni-swipe-action> <uni-...原创 2021-03-04 00:03:38 · 22249 阅读 · 10 评论 -
uniapp组件-uni-steps 步骤条
效果图:代码实现:<template> <view> <uni-steps :options="list1" active-color="#007AFF" :active="active" /> <uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" /> <button type="primary" @cli原创 2021-03-03 21:34:33 · 11997 阅读 · 7 评论 -
uniapp组件-uni-row/col 布局
目录一、基础布局二、混合布局三、分栏偏移(offset、pull、push)四、响应式布局流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局gutter属性表示间隔一、基础布局使用单一分栏创建基础的栅格布局<template> <view> <uni-row style="margin-bottom: 10px;"> <uni-col><view class="demo-uni-co.原创 2021-03-03 21:27:11 · 16745 阅读 · 3 评论 -
uniapp组件-uni-list-chat聊天列表
目录一、圆/方头像且显示分割线二、带圆点三、自定义右侧内容四、带通知角标的单头像聊天列表五、带通知角标的多头像聊天列表一、圆/方头像且显示分割线<template> <view> <uni-section title="圆头像且显示分割线" type="line"></uni-section> <uni-list-chat :avatar-circle="true" title="张三".原创 2021-03-03 01:29:57 · 8721 阅读 · 7 评论 -
uniapp组件-ui-list列表
目录一、基本用法二、显示图标或图片三、右侧显示 switch/badge四、使用插槽官方示例:https://ext.dcloud.net.cn/plugin?id=24列表组件可以在其中使用图标、略缩图或放置任何你想放的元素,使用场景如:导航菜单、列表、设置中心排版等一、基本用法showArrow可以有展开的箭头符号。link不仅有展开的箭头符号,还有点击反馈效果<template> <view> <uni-list>.原创 2021-03-03 00:17:27 · 37606 阅读 · 3 评论 -
uniapp组件-uni-fav收藏按钮
官方示例:https://ext.dcloud.net.cn/plugin?id=864效果图:代码实现:<template> <view> <uni-fav :checked="check" @click="favClick"/> <uni-fav :checked="check" @click="favClick" :star="false" /> <uni-fav :checked="check" @click=原创 2021-03-03 01:30:53 · 1710 阅读 · 0 评论 -
uniapp组件-uni-easyinput 增强型输入框
easyinput 组件是对原生input组件的增强 ,是专门为配合表单组件 uni-forms 而设计的,easyinput 内置了边框,图标等,同时包含 input 所有功能。效果图:代码实现:<template> <view> <view>输入内容:"{{ value }}"</view> <uni-easyinput v-model="value" focus placeholder="默认" @input="in原创 2021-03-03 01:31:17 · 31454 阅读 · 1 评论 -
uniapp组件-uni-data-checkbox 单选框/复选框
一、单选框效果图:代码实现:<template> <view> <uni-section title="单选" type="line"/> <view class="text">选中:{{ value }}</view> <uni-data-checkbox v-model="value" :localdata="sex"/> <uni-data-checkbox v-model="valu原创 2021-03-02 13:34:53 · 17633 阅读 · 3 评论 -
uniapp组件-uni-countdown倒计时
官方示例:https://ext.dcloud.net.cn/plugin?id=25倒计时组件主要用于促销商品剩余时间,发送短信验证等待时间等场景效果图:代码实现:<template> <view> <uni-countdown :day="1" :hour="1" :minute="12" :second="40" :show-colon="false"/> <uni-countdown :day="1" :hour="1"原创 2021-03-02 13:00:37 · 5964 阅读 · 0 评论 -
uniapp组件-uni-collapse折叠面板
官方示例:https://ext.dcloud.net.cn/plugin?id=23效果图:代码实现:<template> <view> <uni-collapse :accordion="true"> <uni-collapse-item title="标题文字1"> <text class="content">折叠内容主体,可自定义内容及样式</text> </uni-col原创 2021-03-02 12:37:14 · 14910 阅读 · 4 评论 -
uniapp组件-uni-tag标签
官方示例:https://ext.dcloud.net.cn/plugin?id=35Tag 组件,用于展示1个或多个文字标签,可点击切换选中、不选中的状态一、实心标签<template> <view> <uni-tag text="标签" style="width: 61px;text-align: center;" /> <uni-tag text="标签" type="primary" style="width: 61px;text原创 2021-03-02 00:59:59 · 12044 阅读 · 1 评论 -
uniapp组件-uni-transition过渡动画
过渡动画,通常用于元素的过渡效果,例如淡隐淡出效果,遮罩层的效果、放大缩小的效果等一、基础过渡动画<template> <view> <uni-section title="基础过渡动画" type="line"></uni-section> <view class="example-body"> <button @click="open(['slide-top'])">slide-top</butt原创 2021-03-02 00:10:14 · 26893 阅读 · 5 评论 -
uniapp组件-uni-rate评分
官方示例:https://ext.dcloud.net.cn/plugin?id=33评分组件多用于商品评价打分、服务态度评价、用户满意度等场景效果图:代码实现:<template> <view> 基本用法(支持滑动手势选择评分):<uni-rate v-model="rateValue" @change="onChange" /> 不支持滑动手势选择评分:<uni-rate :touchable="false" :valu原创 2021-03-02 00:10:38 · 6860 阅读 · 0 评论 -
uniapp组件-uni-pagination分页器
官方示例:https://ext.dcloud.net.cn/plugin?id=32Pagination 分页器组件,用于展示页码、请求数据等。一、基本属性<template> <view> <uni-pagination :total="60"/> <uni-pagination :total="50" prev-text="前一页" next-text="后一页" /> <uni-pagination :show原创 2021-03-02 00:10:53 · 5313 阅读 · 0 评论 -
uniapp组件-uni-number-box数字输入框
官网示例:https://ext.dcloud.net.cn/plugin?id=31数字输入框组件多用于购物车加减商品等场景一、基本属性<template> <view class="page"> <uni-number-box /> <uni-number-box :min="2" :max="7" :value="4" /> <uni-number-box :step="0.1" /> <uni-原创 2021-03-02 00:11:03 · 11630 阅读 · 1 评论 -
uniapp组价-uni-load-more加载更多
官方示例:https://ext.dcloud.net.cn/plugin?id=29一、基本状态<template> <view> <uni-load-more status="more" /> <uni-load-more status="loading" /> <uni-load-more status="noMore" /> </view></template>二、图标类型原创 2021-03-02 00:11:12 · 8700 阅读 · 0 评论 -
uniapp组件-uni-fab悬浮按钮
官网示例:https://ext.dcloud.net.cn/plugin?id=144效果图:代码实现:<template> <view> <uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="top" direction="horizontal" :popMenu="true" @trigger="trigger原创 2021-03-02 00:11:23 · 13953 阅读 · 3 评论