微信小程序
asteriaV
这个作者很懒,什么都没留下…
展开
-
微信小程序-自定义复选框
1,效果2,wxml<checkbox-group bindchange="checkboxChange" class="checkbox-group"> <view wx:for="{{checkboxArr}}" wx:key="index" class="padding-xs"> <label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap='checkbo..转载 2021-01-22 15:39:17 · 1373 阅读 · 1 评论 -
微信小程序订单列表加一个“更多”来显示/隐藏按钮
1.效果图,点击订单列表的"更多",会显示出隐藏的按钮,再次点击"更多"就隐藏2.wxml这里是用订单id来判断的 <view class='order-list' wx:for="{{userOrderList}}" wx:key="index"> <view class='item' wx:for="{{item.list}}" wx:for-item="vo" wx:key="index" data-item="{{vo}}">原创 2020-12-31 10:06:50 · 2035 阅读 · 0 评论 -
微信小程序限制当前位置和目的地的距离(签到)
1. 获取当前位置经纬度 onLoad: function (options) { var that = this; campaign_id = campaign_id wx.getLocation({ type: 'wgs84', success: function (res) { console.log(res) lat1 = res.latitude, lng1 = res.longitude转载 2020-12-25 17:47:46 · 1782 阅读 · 0 评论 -
微信小程序利用云函数获取手机号码
小程序获取手机号码方式一、取到加密数据,然后提交到服务器解密,二、获取到cloudID,用云函数, 优点:直接获取原始数据,节省服务器资源1.wxml<button class="gettel" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 获取手机号</button>2. 点击按钮调用云函数,将cloudID传给云函数getPhoneNumber(e) {va...转载 2020-12-24 11:28:34 · 1974 阅读 · 0 评论 -
微信小程序获取手机号60s倒计时
1.2. <view class="cu-form-group" style="border-top: 1rpx solid #eee;"> <view class="title">手机号</view> <input name='phone' placeholder="请输入新手机号" value="{{phone}}" type="number" bindinput="inputBindPhone" ></i原创 2020-12-24 10:00:24 · 249 阅读 · 1 评论 -
微信小程序返回上一页的时候把数据传给data的参数值
1,返回上一页的时候需要把数据传给下一个页面的data里面对应参数值B页面 pageBack(){//放到返回上一页方法或成功的回调里面 var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面 //直接调用上一个页面的setData()方法,把数据存到上一个页面中去 prevPage.setData({ currentTab:0 //curre.原创 2020-12-15 15:05:09 · 735 阅读 · 0 评论 -
js截取/转换时间格式
js console.log(create_time)//2020-12-10T06:49:59.189Z // 转换时间格式 let date = create_time; let year = date.substring(0, 5); let month = date.substring(5, 8); let day = date.substring(8, 10); let hour = date.substring.原创 2020-12-10 16:01:25 · 365 阅读 · 0 评论 -
js计算两个日期时间的差值
letdate1=newDate('2020-12-02 12:30:54') letdate2=newDate('2020-12-02 15:38:09') lets1=date1.getTime(),s2=date2.getTime(); lettotal=(s2-s1)/1000; letday=parseInt(total/(24*60*60));//计算整bai数天du数 let afterDa...原创 2020-12-03 12:01:20 · 7352 阅读 · 1 评论 -
微信小程序动态获取当前时间
1,在根目录下utils文件夹创建utils.js写获取时间方法utils.js /**获取当前系统时间 */function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var se原创 2020-11-30 16:59:08 · 6620 阅读 · 3 评论 -
微信小程序计时器开始和结束功能
1,微信小程序计时功能,点击开始计时2,wxml<view class='tip'>计时器{{h}}:{{m}}:{{s}}</view>jsdata:{ h:'00', m:'00', s:'00'}, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.queryTime() },// 计时器.原创 2020-11-30 14:33:51 · 5144 阅读 · 2 评论 -
微信小程序使用日历插件
一,添加插件1,在你的小程序关联的微信公众平台打开设置》第三方服务》添加插件2,直接AppID(wx92c68dae5a8bb046)搜索到该插件并申请授权,授权成功即可在小程序使用二,小程序使用插件app.json配置 "plugins": { "calendar": { "version": "1.1.3", "provider": "wx92c68dae5a8bb046" }},使用插件页面的.json页面引入.原创 2020-11-25 14:18:12 · 6718 阅读 · 3 评论 -
微信小程序手机号码加****
utils.js// 手机号加**var toHide = function(array) { var phone = array.substring(0, 3) + '****' + array.substring(7); return phone;}module.exports.toHide = toHide;使用页面index.jsvar utils = require('../../utils/utils.js')Page({ /** * 页面的初原创 2020-11-24 15:32:11 · 281 阅读 · 0 评论 -
微信小程序获取当前位置(二)
现在要点击下面图标的时候获取到当前位置信息:wxml <view class="task-item"> <view class="task-item-title">详细地址</view> <view class="task-item-input2"> <input name='address' placeholder="请输入详细地址" value="{{address}}" type="text" ..原创 2020-11-12 18:07:50 · 246 阅读 · 0 评论 -
微信小程序多选功能,复选功能
wxml<checkbox-group bindchange="checkboxChange"> <label class="team_info_item" wx:for="{{items}}" wx:key="index"> <view class="item_icon"> <!-- <view class="userinfo-avatar"> <open-data type="userAvatarUrl.原创 2020-11-12 14:53:00 · 1089 阅读 · 0 评论 -
微信小程序点击获取当前具体位置信息
一,创建一个地图页面Location二,1,Location.wxml什么都不用写2,Location.js const app = getApp()Page({ /** * 页面的初始数据 */ data: { longitude:"",//中心经度 latitude:"",//中心纬度 name:""//选择的位置名称 }, /** * 生命周期函数--监听页面加载 */ onLoad: funct原创 2020-11-10 10:47:40 · 1910 阅读 · 2 评论 -
微信小程序地图功能
一,显示地图 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="r转载 2020-11-10 10:35:08 · 2403 阅读 · 1 评论 -
微信小程序上传图片/文件
微信官方文档有提供上传文件方法:wx.chooseMessageFile(Object object)基础库 2.5.0 开始支持,低版本需做兼容处理。从客户端会话选择文件。主要通过改变type的值来选择需要上传的类型,需要在真机上试验wx.chooseMessageFile({ count: 10, type: 'image', success (res) { // tempFilePath可以作为img标签的src属性显示图片 const t..原创 2020-10-26 18:12:06 · 691 阅读 · 0 评论 -
npm引入小程序官方WeUI组件库weui-miniprogram
一,查看是否安装npm包通过npm -v 查看npm的版本,如果能显示相应出版本号,就说明是安装成功的。二,如果没有安装1.npm init 会提示不是内部命令2.安装node环境这时候就需要安装node环境,可以在http://nodejs.cn/download/下载对应的版本三,开始构建nmp1.进入小程序根目录(app.js所在目录),打开cmd输入:npm init -ynpm init -y参数 -y 表示对 npm 要求提供的信息,都自动按下回车键,.原创 2020-10-26 16:31:08 · 1752 阅读 · 0 评论 -
微信小程序写横向滚动条导航栏
wxml <view class="title-menu"> <view class="title-menu-item active"> 全部 </view> <view class="title-menu-item">书柜</view> <view class="title-menu-item">桌</view> <view class="title-menu.原创 2020-10-10 17:52:58 · 825 阅读 · 0 评论 -
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做?去掉原生导航栏。将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。 加上"navigationStyle":"custom",这样原生的导航栏就已经消失,甚至后退键也不会出现需要自定义。 另外,早在2016年微信已经开始适配沉浸式状态栏,目前几乎所有的机型里微信都是沉浸式状态栏,也就是说去掉原生导航栏的同时,整个屏幕已经成为可编程区域。 文档:https://developers.weixi转载 2020-09-24 17:05:31 · 2169 阅读 · 0 评论 -
微信小程序自定义弹框
效果图:wxml <!-- 取消订单按钮 --><view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view><!-- 取消订单弹框 --><view class="modalDlg-mask" wx:if="{{showModal}}"></view><vie..原创 2020-09-21 10:32:36 · 296 阅读 · 0 评论 -
微信小程序——使用Vant Weapp 框架
vant在微信小程序中使用是vant weapp,安装使用的方法有两种,通过npm安装,也可以直接引入dist文件一,通过 npm 安装步骤一 通过 npm 安装需要注意的是package.json和node_modules必须在miniprogram目录下# 通过 npm 安装npm i @vant/weapp -S --production# 通过 yarn 安装yarn add @vant/weapp --production# 安装 0.x 版本npm i...原创 2020-07-06 16:19:50 · 1650 阅读 · 0 评论 -
微信小程序——behaviors组件混入
一,behaviorsbehaviors是用于组件间代码共享的特性,类似于一些编程语言中的 “mixins” 或 “traits”。每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个behavior,behavior也可以引用其它behavior。详细的参数含义和使用请参考Behavior 参考文档。二,组件中使用1,创建behaviors...原创 2020-07-04 18:36:24 · 987 阅读 · 0 评论 -
微信小程序——Iconfont字体图标的引用
一,创建项目在iconfont阿里巴巴字体图库里面创建项目,添加好你需要的图标到项目中二,下载图库项目点击下载至本地:三,解压到项目在小程序项目中创建iconfont文件,解压复制到该文件中:前面那两个demo的可以不要,要下面这些就OK了:四,iconfont.wxss把iconfont.css文件改为iconfont.wxss才能被微信小程序识别,打开文件,里面的类名就是我们的图标名称了。这里的类名也是可以自己修改的,要注意的是你修改后应用的时...原创 2020-07-04 16:25:06 · 923 阅读 · 0 评论 -
微信小程序——slot插槽的使用 (多插槽使用)
一,创建组件在根目录项目创建一个components文件夹目录,然后在里面创建你的组件,这里我们要注意创建组件页面时我们需要选择:创建Component了二,组件模板组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。在组件模板中可以提供一个<slot>节点,用于承载组件引用时提供的子节点1,slot的使用<!-- 组件模板 --><view class="wrapper"> &l...原创 2020-07-04 14:40:49 · 14357 阅读 · 0 评论 -
微信小程序——列表项上移下移效果
需要实现的效果:点击向下按钮时所选项内容和下一项内容交换,向上按钮则相反,删除按钮则点击时删除所选项那一列内容index.wxml<view class="subject" wx:for="{{sublist}}" wx:key="index"> <view>{{index+1}}.{{item}}</view> <view class="btns"> <view class="btn up" wx:if="{{index>..原创 2020-07-03 16:48:32 · 3698 阅读 · 0 评论 -
微信小程序——request封装/promise,async封装request
一,request封装1,在根目录utils下创建一个index.js文件,用来写封装的request2,创建config/index.js来放我们的基础路径3,utils/index.jsimport {BASEURL} from '../config/index';//引入基础路径export function $get(url,success){$request(url,'GET',success)}export function $post(url,succes..原创 2020-07-02 18:36:22 · 656 阅读 · 2 评论 -
微信小程序——fastmock在线接口mock平台
我们在小程序中使用mock.js模拟数据在上篇文章有讲到了,现在就来给大家讲一下mock平台上使用fastmock写在线接口 ,这样子只要前端和后台先协调好接口文档,命名...,到时候我们只要把接口一改就可以了,节约了时间。一,创建自己的接口项目fastmock地址:https://www.fastmock.site/#/projects没有注册的先注册,然后创建自己的项目二,写接口fastmock 引入了mock.js的支持,支持所有的Mock.js随机数据的生...原创 2020-07-01 17:06:23 · 1895 阅读 · 4 评论 -
微信小程序——使用mock.js模拟数据
一,创建目录再根目录utils目录下面创建WxMock.js文件和api.js文件二,WxMock.jsWxMock.js下载地址:https://github.com/webx32/WxMockMock.js 使用方式见http://mockjs.com/examples.html三,api.jsapi.js:配置模拟数据和后台接口数据,通过DEBUG = true;//切换数据入口let API_HOST = "http://xxx.com/x...原创 2020-07-01 15:06:27 · 4120 阅读 · 1 评论 -
微信小程序——购物车单选,全选,删除,结算功能
效果图如下,我们要实现购物车的单选,全选,结算功能:代码index.wxml<view class="shop-item" wx:for="{{goodsList}}" wx:key="index"><view data-id="{{item.id}}" bindtap="select"><image src="{{item.checked?'../../assets/images/icons/checkall.png':'../../asset...原创 2020-07-01 10:24:11 · 6555 阅读 · 2 评论 -
微信小程序——实现tab切换效果
效果图如下:点击那个tab标题就显示对应内容,并高亮显示index.wxml<view class="tab"> <view data-i="{{0}}" bindtap="setTabIndex" class="{{activeIndex===0?'active':''}}">最新热卖</view> <view data-i="{{1}}" bindtap="setTabIndex" class="{{activeIndex===1?...原创 2020-06-30 11:43:11 · 1532 阅读 · 0 评论 -
微信小程序——页面中使用本地json数据
1,创建数据文件创建一个testdata文件,再创建一个data.js文件用来写我们的json数据data.js页面:var localData = { "list":[ { "id":55, "name":"小明", "age":18, "month":"2020-5-21", "content":"微信小程序中实现模拟数据报文进行页面展示" }, { "id":56, "原创 2020-06-29 18:52:16 · 9610 阅读 · 2 评论 -
微信小程序事件的使用
wxml页面:"data-"用来传参,data-{{参数名称}}="{{参数内容}}"。微信小程序都是用bindtap来绑定事件的。 <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this"> <view> {{idx}}:{{itemName}} <button data-index="{{idx}}" data-aa="{{itemName}}".原创 2020-06-29 15:30:36 · 893 阅读 · 0 评论 -
微信小程序wx:for循环列表渲染
列表渲染wx:for语法:wx:for={{xxx}}书写位置:某一个组件的属性部分此时可以在该指令所在的组件上 通过:{{index}}:数组下标{{item}}:数组当前项这两种方式来分别插入索引和值在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item<view wx:for="{{array}}"> {{index}...原创 2020-06-29 11:49:23 · 5157 阅读 · 0 评论