微信小程序

微信小程序获取位置展示地图并标注信息的实例代码

1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式 2.获取位置要在app.json中标明权限 3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点 index.js //index.js //获取应用实例 const app = getApp() Page({ data: { }, onLoad: func... »

微信小程序登录对接Django后端实现JWT方式验证登录详解

先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料。 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3.通过微信接口把code换取成openid 4.后端将openid作为用户名和密码 5.后端通过JSON web token方式登录,把token和用户id传回小程序 6.小程序将token和用户id保... »

微信小程序身份证验证方法实现详解

身份证验证在很多小程序中已经成为必不可少的一部分,它能有效的判断出身份证是否存在,是否输入错误,以防不良人士恶意攻击。 判断一个身份证是否合法的身份证号码有以下几个步骤需要验证 ①:身份证18位数 ②:前17位全是数字 ③:验证最后一位 1.前面的身份证号码17位数分别乘以不同的系数    从第一位到第十七位的系数分别为:7-9-10-5-8-4-2-1-6... »

详解从0开始搭建微信小程序(前后端)的全过程

前言 有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐,那什么是优质的信息呢?我这里假设的是排行榜里越靠前的信息就越是优质的信息,于是就做了一个这几类信息的排行榜小程序,当然排行的信息不是我随便瞎编的,数据来源主要是豆瓣以及其他一些排行网站,希望排行数据... »

详解微信小程序框架wepy踩坑记录(与vue对比)

详解微信小程序框架wepy踩坑记录(与vue对比)

wepy框架借鉴了vue的语法风格和功能特性,但是在使用过程中还是发现与vue有很大的不同。所以最后的解决办法是用的 wepy-redux,类似vuex,放在 store 中实现的。数据绑定这个是小程序原生方法中的不好点,wepy不能帮忙背这个锅。动态绑定classwepy中需要遵循小程序原生的绑定方式,与vue中也不同。最后附上官方文档链接,供大家参考:小程序官方文档 wepy官方文档 »

微信小程序全局变量功能与用法详解

本文实例讲述了微信小程序全局变量功能与用法。分享给大家供大家参考,具体如下:全局变量的作用在微信小程序开发中,会遇到一个很实际的应用场景,就是一个变量会在多个页面进行使用。在请求地址这种批量全局变量的定义时,采用方法二,有利于后期的查找和修改。希望本文所述对大家微信小程序开发有所帮助。 »

微信小程序实现打卡日历功能

生活中有各种可以打卡的app,例如背单词打卡什么的,本人觉得很有意思,于是本人在大二时做了一款诚信状打卡的微信小程序,这里讲述一下编写的过程。 先说一下开发环境:用的是微信web开发工具开发的,后台采用了Bmob后台,比较方便。 先展示一下成果: 话不多说,直接上代码,里面也有挺多的注释,以防自己忘记,当然各位如果直接复制过去肯定不能有当前的效果,注意后台数据的交互,不过做一个界面还是没有问题的。... »

微信小程序中上传图片并进行压缩的实现代码

小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bin... »

微信小程序自定义底部弹出框

本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下 效果图:   html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" clas... »

JS中promise化微信小程序api

promise化的原因微信小程序的api用的是对象参数回调模式,很容易造成回调地狱,代码难以阅读,判断,修改 和调试.微信小程序api示例// 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 g »

让微信小程序支持ES6中Promise特性的方法详解

遇到的问题微信开发者工具更新版本后, 移除了开发者工具对 ES6 中 Promise 特性原生的支持, 理由是因为实体机器是不支持 Promise 的, 所以我们需要引入第三方的 Promise 库微信更新日志解决方案下载第三方库在这里我引入的是 Bluebird 库, 可以到Bluebird官网 下载需要的文件,也可以通过本地下载Bluebrid 提供了两 »

微信小程序 action-sheet 反馈上拉菜单简单实例

微信小程序 action-sheet 反馈上拉菜单简单实例看下实现效果图:jsvar items = ['item1', 'item2', 'item3', 'item4'] var pageObject = , actionSheetTap: function { this.setData({ actionSheetHidden: ! »

微信小程序 image组件binderror使用例子与js中的onerror区别

微信小程序image组件binderror使用例子(对应html、js中的onerror)     官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接40... »

微信小程序image图片加载完成监听

需求 在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。 实现 1. 绑定回调 通过image标签的bindload属性绑定图片加载完成回调函数,src根据图片加载是否完成绑定是否显示缺省图: <image src='{{loadComplete?srcI... »

微信小程序文字显示换行问题

小程序文字显示换行 问题用户在上传图文时,输入换行符。导致我在拿到数据后JSON.parse的时候报错。' , url:''},]解决在拿到数据时先进行正则匹配处理,将换行替换为。/g,'\\n')然后在进行JOSN.parse就无问题啦。 »

微信小程序自定义组件实现环形进度条

本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1、在根目录创建名为components的文件夹,用来放需要引用的自定义组件。 2、创建名为canvas-ring的文件夹,用来放环形进度条自定义组件。 3、鼠标指着canvas-ring的文件夹 鼠标右键 “新建 Co... »

微信小程序 slot踩坑的解决

微信小程序 slot踩坑的解决

今天在使用微信小程序 component 里的 slot 时发现,当只用一个 slot 并且将 slot 命名后,页面中调用这个 slot 并不会加载进来。 研究尝试后发现,如果想要使用命名的方式调用单个 slot ,也需要像调用多个 slot 的方式 在 component/xxx.js 里开启多个 slot 的功能。下面看代码。 // component <view class='slo... »

微信小程序实现联动选择器

本文实例为大家分享了微信小程序实现联动选择器的具体代码,供大家参考,具体内容如下 picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 先来看看效果图: 1、普通选择器 mode = selector(默认的) <view class='picker'>普通选择器</vi... »

微信小程序使用map组件实现路线规划功能示例

本文实例讲述了微信小程序使用map组件实现路线规划功能。分享给大家供大家参考,具体如下: 效果图 实现原理 1. 通过map组件标记起始点和绘制路线图; 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程。 WXML <view class="flex-style"> <view class="flex-item {{status == 'car' ?... »

微信小程序实现时间预约功能

一个类似电商的时间预约功能,供大家参考,具体内容如下 1 .概述 我们在学习微信小程序或者做项目时,应该会遇到需要时间预约功能情况,那么这个时间预约功能我们应该怎么编写呢?于是就做了一个类似电商的时间预约功能,觉得有用,就独立出来成了个小插件,今天我们就分享这样的小教程。希望对大家有所帮助。 不多说了,上图来啦! 2. wxml <!--pages/orderTime/index.wxml-... »

微信小程序自定义组件封装及父子间组件传值的方法

首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{... »

微信小程序实现手指触摸画板

本文实例为大家分享了微信小程序实现手指触摸画板的具体代码,供大家参考,具体内容如下 先看效果图: wxml <!--pages/shouxieban/shouxieban.wxml--> <view class="container"> <view>手写板(请在下方区域手写内容)</view> <canvas style="width: {{c... »

微信小程序之发送短信倒计时功能

点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号" name="phonen... »

微信小程序 新建登录页并实现tabBar隐藏

微信小程序 新建登录页并实现tabBar隐藏 实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar–>list–>pagePath 不能写登录页面的路径,并且首页跳转到登录页时,用 navigateTo 跳转到新页面... »

微信小程序 navbar实例详解

微信小程序 navbar实例详解 实现效果图: data typeList: [ { name: "日报", id: "1" }, { name: "周报", id: "2" }, { name: "月报", id: "3" }, { name: "目录", id: "4" }] js that.setData({ dateValue: util.formatTime(new Date()), /... »

Page 1 of 9123»