如何获取用户当前地址，这个就要先用到小程序的定位功能:定位官方文档第一步获取当前定位在js当中写运行项目之后会有个这样的弹窗：这是因为开发者需要说明获取用户地理位置的用途。解决方法：在app.json中增加permission属性。这样就可以获取到用户的地理坐标了。第二步讲当前定位转换程地址信息这个功能需要用到腾讯地图SDK：官方文档官方文档上使用SDK的步骤写的挺详细的，还带上了各种链接：第4步的安全域名设置在你自己的小程...
首先我们有这么一种需求，就是我在一个列表中点击了某个item，跳转到详情界面，那么我就需要把item的实体数据从列表页面传递到详情页面，那么我们来看看微信小程序给我们提供的API:这里大家可以清楚看到api中说到的如何传递参数，其实它这里指的参数仅仅是一些普通的数据类型，我们要传递的实体是object类型，那么我们需要先把实体转成string类型进行传递，在详情页面接受到在逆向转成实体，如下面这段示例： //这里我们跳转详情界...
写项目的时候发现小程序没有自带的弹窗输入的组件，只能自己写一个。1.半透明的遮盖层遮盖层的样式和显隐事件wxml代码：<view class="body"><button bindtap=eject>弹窗</button> </view> <view class="model" catchtouchmove=preventTouchMove wx:if={{showModal}}></view>wxss代码：.model{position: absolute;width: 100%;height: 100%;background: #000;z-index: 999;opacity: 0.5;top: 0;left:0; }js代码： /*** 页面的初始数...
一、演示二、说明：实现思路：需要默认数据，这样才能完美应对list,wx:if的情况，及flex宽度靠内容撑开的样式。替换思路：和imageLoader加载器类似：先展示默认图片，拿到数据之后显示真实的图片具体实现：页面准备一份默认数据：defaultDataxml中：<skeleton watchData={{与卡槽笨蛋一样的对象}}><slot/></skeleton>页面onload时，data=defaultData此时：watchData第一次收到数据(第一次为onload时)，靠默认数据，撑开卡槽容器，自...
前期准备Vant Weapp组件库： https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端：然后初始化一个package.json文件：输入命令：npm init 然后一路回车默认的即可： npm init项目就回产生一个package.json文件： {"name": "miniprogram","version": "1.0.0","description": "","main": "app.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC...
自从小程序文档更新后，自动授权已不存在啦 目前的授权都是通过button来实现的，具体知识点可参考小程序的官方文档，以下是我做的一个小demo（进入首页，跳出一个登录弹出框，弹出框是自己写的一个UI组件），废话不多说，直接上代码 UI组件部分（modal）modal.wxml<view class=modal-mask wx:if={{show}} bindtap=clickMask><view class=modal-content><scroll-view scroll-y class=main-content><slot></slot></scroll-view></vie...
问题场景 所谓悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。 这算是一个比较常见的实现场景了。为什么要用cover-view做悬浮窗？原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view，而是view。 这是简化的代码结构： index.wxml:<view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove"><image class="img" src="https://ss2.baidu.com/6ONYsjip0...
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。以收货地址为例，将添加地址按钮悬浮于最底部，这样再多的地址，也不会被遮挡而看不见。核心代码如下：添加 /*添加地址按钮*/.address-add {position: fixed;bottom: 0;width: 100%;} 改用position: fixed之后，其中width需要...
前言 最近项目中做到相关网约车小程序。需要使用到地图中的路线规划，对3种地图进行了分析。这里稍微做一下总结： 百度地图 百度坐标 （BD-09）腾讯地图 火星坐标(GCJ-02)高德地图 火星坐标(GCJ-02)微信小程序中使用的是腾讯地图作为底图。因此如果使用百度地图时，需要注意坐标的转换。此类坐标的转换函数在网上都有，这里不做过多解释 准备工作： 1、在做小程序 ---- 路线规划之前，需要准备小程序APPID 以及相应使用地图的KEY值...
获取位置获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用。wx.getLocation(object)<view class="container"><button bindtap=getLocation>获取位置</button><view wx:if="{{latitude !=}}"><view>纬度:{{latitude}}</view><view>经度:{{longitude}}</view><view>速度:{{speed}}</view><view>位置的精确度:{{accuracy}}</view><view>高度:{{altitude}}</view><vi...
演示 演示1演示2演示3 一、功能描述1、预设过渡 支持区分enter、leave支持预设过渡的组合特别强调:支持元素展开、闭合的过渡。name==slide或[slide[,]]，即可实现，无需外部传height支持外部传类来过渡或动画/* 预留过渡 */ /** *1、fade *2、移动:up,right,down,left四个方向 *3、scale缩放：默认是从0->1，还预设了一个从1->1.2的 *4、rotate旋转。顺时针旋转。角度用以上方向来指示。如果逆时针中间加上reserve。 如rotate-ri...
微信小程序中button去除默认的边框的实现方法如下所示： button {position:relative;display:block;margin-left:auto;margin-right:auto;padding-left:14px;padding-right:14px;box-sizing:border-box;font-size:18px;text-align:center;text-decoration:none;line-height:2.55555556;border-radius:5px;-webkit-tap-highlight-color:transparent;overflow:hidden;color:#000000;background-color:#F8F8F8; }这是button默认自带的c...
地址：https://youzan.github.io/vant/#/zh-CN/intro 一.引入Vant组件库 1.首先运行 npm init就会生成 package.json2.运行 npm i vant-weapp -S --production 3.安装成功后 点击 工具 => 构建npm之后点击 详情 => 使用构建npm 渲染二.使用组件库 首先在json文件中引入组件"van-button": "vant-weapp/button" 之后可以在官网找到想要用的组件使用 报错码VM292:1 thirdScriptError sdk uncaught third Error module "miniprog...
最近在做一个项目的时候，需要用到下拉框搜索，网上搜了半天没找到想要的，决心自己动手写一个。 首先看下效果图：左边是输入框，可以进行模糊查询，右边图标进行选择。代码部分，我定义了五个参数，和一个自定义的方法，list:下拉框数组，_width：组件宽度， _height：组件高度， bind:action: 自定义方法考虑到每个人用的时候用的对象数组结构不同我预留了两个字段，做自定义(可不写)，怎么样是不是很强大。actualvalue：下拉框实...
A是父组件，B是子组件 父传子 <!-- 父组件A wxml --> <view><componentB paramAtoB={{paramAtoB}}></componentB> </view>//父组件Ajson （里面不能有注释）{"navigationBarTitleText": "父子传值","usingComponents": {"componentB": "../../components/son/son"} } //父组件A js // view/father/father.js Page({/*** 页面的初始数据*/data: {paramAtoB: "我是A向B传值"} }) <!-- 子组件B wxml --> <view class="inner">{{paramAt...