草庐IT

uni-getLocation

全部标签

uni-app开发微信小程序使用腾讯地图选点和城市选择器插件

文章目录前言效果图第一步、登录腾讯地图申请属于自己小程序的key第二步、登录微信公众平台添加插件第三步、引入插件包,配置定位允许授权第四步、通过点击事件使用插件第五步、拿到插件接口返回的选点结果对象第六步、遇到的报错问题报错1.使用腾讯服务地图城市选择器插件,报错请设置key授权本小程序appId报错2前言因为开发微信小程序,所以我这里用的是腾讯地图选点插件。附上官方文档腾讯地图选择器插件腾讯地图选点插件效果图地图选点效果图城市选择效果图第一步、登录腾讯地图申请属于自己小程序的key腾讯位置服务应用管理⇒我的应用⇒创建应用⇒添加key:如下图1)点击创建应用,输入应用名称,选择应用类型。2)在

uni-app开发微信小程序使用腾讯地图选点和城市选择器插件

文章目录前言效果图第一步、登录腾讯地图申请属于自己小程序的key第二步、登录微信公众平台添加插件第三步、引入插件包,配置定位允许授权第四步、通过点击事件使用插件第五步、拿到插件接口返回的选点结果对象第六步、遇到的报错问题报错1.使用腾讯服务地图城市选择器插件,报错请设置key授权本小程序appId报错2前言因为开发微信小程序,所以我这里用的是腾讯地图选点插件。附上官方文档腾讯地图选择器插件腾讯地图选点插件效果图地图选点效果图城市选择效果图第一步、登录腾讯地图申请属于自己小程序的key腾讯位置服务应用管理⇒我的应用⇒创建应用⇒添加key:如下图1)点击创建应用,输入应用名称,选择应用类型。2)在

Uni-app基础

Uni-app基础一、Uni-app是什么?uni-app是一个使用Vue.js开发跨平台应用的前端框架;开发者编写一套代码,uni-app将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。二、使用步骤1.推荐使用软件HbuilderX下载地址:HBuilderX-高效极客技巧2.创建项目及初始化步骤(1)启动小程序 (2)启动小程序 1.微信公众平台查看自己的小程序id 开发→开发管理→开发设置→找到appid2.在uniapp中进行配置 目录下的manifest.json→微信小程序配置→填写小程序appid (3)目录结构├──pages       

Uni-app基础

Uni-app基础一、Uni-app是什么?uni-app是一个使用Vue.js开发跨平台应用的前端框架;开发者编写一套代码,uni-app将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。二、使用步骤1.推荐使用软件HbuilderX下载地址:HBuilderX-高效极客技巧2.创建项目及初始化步骤(1)启动小程序 (2)启动小程序 1.微信公众平台查看自己的小程序id 开发→开发管理→开发设置→找到appid2.在uniapp中进行配置 目录下的manifest.json→微信小程序配置→填写小程序appid (3)目录结构├──pages       

【uni-app】uniapp如何实现左滑删除以及改造uni-ui中的swiperAction

左滑删除或者置顶之类的功能我们经常要实现,类似于微信的删除聊天框的结构我就不贴图了1-如何在uniapp中实现左滑删除我使用的是uni-ui中的swiperAction不得不说性能还是不错的。大家想自己手动封装这个框架也是可以的,可以下载下来源码看看人家的实现思路,在h5和小程序上主要就是使用touchstart和touchend来监控的插件地址:uni-swipe-action滑动操作-DCloud插件市场文档地址:action文档代码参考:这里演示的是最常用的可以去官网看看其他内容//right-options右滑出现的内容。left-options:左滑出现的内容这里是未滑动之前显示的内

【uni-app】uniapp如何实现左滑删除以及改造uni-ui中的swiperAction

左滑删除或者置顶之类的功能我们经常要实现,类似于微信的删除聊天框的结构我就不贴图了1-如何在uniapp中实现左滑删除我使用的是uni-ui中的swiperAction不得不说性能还是不错的。大家想自己手动封装这个框架也是可以的,可以下载下来源码看看人家的实现思路,在h5和小程序上主要就是使用touchstart和touchend来监控的插件地址:uni-swipe-action滑动操作-DCloud插件市场文档地址:action文档代码参考:这里演示的是最常用的可以去官网看看其他内容//right-options右滑出现的内容。left-options:左滑出现的内容这里是未滑动之前显示的内

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (上)

🤵‍♂️个人主页:@计算机魔术师👨‍💻作者简介:CSDN内容合伙人,全栈领域优质创作者。该文章收录专栏✨2022微信小程序京东商城实战✨文章目录一、前言介绍二、创建goodlist分支(选读*)三、商品列表搜索数据请求四、调取接口获取列表数据五、渲染商品列表页面六、将商品item组件封装为自定义组件七、使用过滤器处理商品价格一、前言介绍主要是有三种方式进入到商品页面商品楼层点击(传参query查询)分类页面点击(传参cid分类)搜索页面点击(传参query查询)添加商品页面编译模式二、创建goodlist分支(选读*)gitcheckout-bgoodlist三、商品列表搜索数据请求商品列表搜

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (上)

🤵‍♂️个人主页:@计算机魔术师👨‍💻作者简介:CSDN内容合伙人,全栈领域优质创作者。该文章收录专栏✨2022微信小程序京东商城实战✨文章目录一、前言介绍二、创建goodlist分支(选读*)三、商品列表搜索数据请求四、调取接口获取列表数据五、渲染商品列表页面六、将商品item组件封装为自定义组件七、使用过滤器处理商品价格一、前言介绍主要是有三种方式进入到商品页面商品楼层点击(传参query查询)分类页面点击(传参cid分类)搜索页面点击(传参query查询)添加商品页面编译模式二、创建goodlist分支(选读*)gitcheckout-bgoodlist三、商品列表搜索数据请求商品列表搜

[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑

uni.$emit和uni.$on是uniapp自带的跨页面传值  vue父子通讯可以用props this.$emit  这种简单的父子通讯紧适用于页面和组件或者组件之间的传值,他并不适用于页面和页面的互相传值那要实现页面通讯呢,我们一起来看看uni.$emit和uni.$on的使用方法示例:    A页面在onload中使用   uni.$on('自定义名称',function(data){}  接收  data为接收到的值    B页面在事件中 使用   uni.$emit('自定义名称',{属性名称:属性值})并搭配使用 uni.navigateBack跳回A页面   A页面的自定义名

[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑

uni.$emit和uni.$on是uniapp自带的跨页面传值  vue父子通讯可以用props this.$emit  这种简单的父子通讯紧适用于页面和组件或者组件之间的传值,他并不适用于页面和页面的互相传值那要实现页面通讯呢,我们一起来看看uni.$emit和uni.$on的使用方法示例:    A页面在onload中使用   uni.$on('自定义名称',function(data){}  接收  data为接收到的值    B页面在事件中 使用   uni.$emit('自定义名称',{属性名称:属性值})并搭配使用 uni.navigateBack跳回A页面   A页面的自定义名