经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 微信小程序

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

(一) 准备工作 (1) 登录注册 注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了 https: mp.weixin.qq.com/wxopen/waregister?action=step1 登录账号:通过邮箱密码登录,亦或者绑定微...[2020/7/21]

微信小程序开发部署

一、开发准备   1,想要开发微信小程序,必须要有一个AppId,如果没有可以去注册一个。       https: mp.weixin.qq.com/进入注册页面,点击上方注册。              ...[2020/7/17]

微信小程序整个页面的自动适应布局的实现

微信小程序整个页面的自动适应布局的实现

按比例适应布局 大家有没有过一个烦恼,就是让某个view的高度或者宽度扩大点,而且是要按比例适应不同的手机,遇到这类问题应该怎么办? 下面就为大家讲解怎么做一个能够自动适应不同手机的布局 1、像素单位 rpx 首先,我们来说说像素单位rpx,rpx是官方为小程序出的尺寸单位rpx(r...[2020/7/13]

微信小程序拖拽排序列表的示例代码

拖拽排序列表 思路 界面分为两层: 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现) 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件。 事件 主要监听:longpre , touchm...[2020/7/8]

微信小程序用户盒子、宫格列表的实现

最近在学习小程序,看到别人九宫格的做法,就留个笔记,也分享给大家 效果图如下所示 .wxml <view cla =''user-box'' style="margin-top:20rpx;"> <view cla =''ctn''> ...[2020/7/1]

微信小程序实现发微博功能的示例代码

跳转页面发状态消息,是一个很常见的功能,功能截图如下: 具体实现,这个功能涉及到了page传递参数功能,那么今天就仔细探究一下如何实现 首先,这个功能涉及两个页面,分别为top和list 先看list页面,即图片1和图片4,该页面的布局如下 <!--pag...[2020/6/24]

微信小程序之搜索分页功能的实现代码

微信小程序之搜索分页功能的实现代码

直接上代码: wxml: <wxs src="../wx changeimg.wxs" module="changeimg" /> <view cla ="container"> <view cla ="search_input"> ...[2020/6/23]

微信小程序返回上一级页面的实现代码

微信小程序返回上一级页面 wx.navigateBack({ delta: 1 返回上一级页面}) html: <view cla ="refusea_btn"> <van-button type="primary" size="large...[2020/6/19]

微信小程序实现搜索框功能及踩过的坑

先上代码: wxml: <!-- 顶部搜索框 --> <view cla ="inputcontainer"> <view cla ="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}"&g...[2020/6/19]

微信小程序 scroll-view的使用案例代码详解

scroll-view:滚动视图 使用view其实也能实现滚动,跟div用法差不多 而scroll-view跟view最大的区别就在于:scroll-view视图组件封装了滚动事件,监听滚动事件什么的直接写方法就行。 scroll-view纵向滚动添加属性scroll-y,然后写一个固定高...[2020/6/12]

使用 UniApp 实现小程序的微信登录功能

使用 UniApp 实现小程序的微信登录功能

1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录、则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 Se i...[2020/6/9]

微信小程序中的列表切换功能实例代码详解

感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下: <!-- 标签页面标题 --> <view cla ="tab"> <view cla ="...[2020/6/9]

微信小程序学习总结(五)常见问题实例小结

本文实例总结了微信小程序常见问题。分享给大家供大家参考,具体如下: 问题一 先来看我遇到的第一个问题 以下是我创建的目录 当创建完这个json文件之后,报了下面一个错 这个是我的报错信息。 解决方法:打开这个json文件,输入两个一对花括号完事。 问题二 ...[2020/6/4]

微信小程序学习总结(三)条件、模板、文件引用实例分析

本文实例讲述了微信小程序条件、模板、文件引用。分享给大家供大家参考,具体如下: 上一节的在遍历的时候控制台中会报错 <view wx:for="{{content}}" wx:for-item=''item'' wx:for-index=''index''> {{i...[2020/6/4]

微信小程序学习总结(四)事件与冒泡实例分析

本文实例讲述了微信小程序学习总结(四)事件与冒泡。分享给大家供大家参考,具体如下: 先来熟悉一个swiper组件,可以实现我们常见的轮播图效果。 <view> <swiper cla =''swiper'' indicator-dots="true" ind...[2020/6/4]

微信小程序学习总结(一)项目创建与目录结构分析

本文实例讲述了微信小程序项目创建与目录结构。分享给大家供大家参考,具体如下: 首先,放上微信公众品台的网址https: mp.weixin.qq.com/,下面内容完全可以跟着做。https: mp.weixin.qq.com/debug/wxadoc/dev/devtool devtools...[2020/6/4]

微信小程序学习总结(二)样式、属性、模板操作分析

微信小程序学习总结(二)样式、属性、模板操作分析

本文实例讲述了微信小程序样式、属性、模板操作。分享给大家供大家参考,具体如下: 小程序尺寸单位 rpx是小程序常见的尺寸单位,那么他和px有啥不同一样呢。rpx可以根据屏幕宽度进行自适应。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =...[2020/6/4]

微信小程序实现watch监听

微信小程序实现watch监听

Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch。 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦...)。 小程序实现 类似vue 一样的watch 监听数据 将方法...[2020/6/4]

微信小程序自定义顶部组件customHeader的示例代码

微信小程序自定义顶部组件customHeader的示例代码

1、开启配置自定义顶部 { "window": { "navigationStyle":"custom" } } 在app.json的文件window配置"navigationStyle": "custom"属性即可 2、自定义顶部计算原理 2.1 ...[2020/6/3]

微信小程序语音同步智能识别的实现案例代码解析

微信小程序语音同步智能识别的实现案例代码解析

一、背景 在小程序的一些应用场景中,会有语音转文字的需求。原有的做法一般是先通过小程序的录音功能录下语音文件,然后再通过调用语音智能识别WebApi(比如百度云AI平台,科大讯飞平台)将语音文件转成文字信息,以上的做法比较繁琐且用户的体验性较差。 为解决此问题,微信直接开放了同声传译的插件,...[2020/5/29]

微信小程序实现电子签名并导出图片

微信小程序实现电子签名并导出图片

本文实例为大家分享了微信小程序做电子签名,并导出图片的具体代码,供大家参考,具体内容如下 wxml: <canvas cla ="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchsta...[2020/5/28]

小程序富文本提取图片可放大缩小

小程序富文本提取图片可放大缩小

本文实例为大家分享了小程序富文本提取图片可放大缩小的具体代码,供大家参考,具体内容如下 启发: 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇博客,供大家参考 step1 获取到富文本内容,怎么获取就是请求数据嘛,这个不在赘述了。 ...[2020/5/26]

微信小程序自定义联系人弹窗

微信小程序自定义联系人弹窗

微信小程序自定义类似微信联系人组件,供大家参考,具体内容如下 在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序自定义组件,自定义组件同样需要有js、wx 、...[2020/5/26]

微信小程序实现带放大效果的轮播图

微信小程序实现带放大效果的轮播图

本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下 效果如图 WXML <!-- 轮播图 --> <view cla =''Carousel''> <view cla ="recommend"> ...[2020/5/26]

微信小程序仿抖音视频之整屏上下切换功能的实现代码

效果演示: WXML: <view cla ="video_box"> <view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstar...[2020/5/25]

微信小程序国际化探索实现(附源码地址)

随着小程序应用越来越广泛,国际化支持逐渐成了刚需。 官方文档给出了一个 国际化方案 ,但觉得配置起来稍微有点复杂,对项目结构还有一定的要求。如果是旧项目改动成本太大,遂决定自己实现一个小程序国际化方案。 源码地址:https: github.com/cachecat miniprogram...[2020/5/20]

微信小程序使用GoEasy实现websocket实时通讯

不需要下载安装,便可以在微信好友、微信群之间快速的转发,用户只需要扫码或者在微信里点击,就可以立即运行,有着近似APP的用户体验,使得微信小程序成为全民热爱的好东西~ 同时因为微信小程序使用的是Javascript语法,对前端开发人员而言,几乎是没有学习成本和技术门槛的。对于大部分场景,都可以...[2020/5/19]

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

前言: 微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢? 1 wx:for 从目前的例子看,wx:for 的使用确实是对数组来做的,参考微信icon示例程序。 示例里面都是对数组进行条件判断,比如...[2020/5/19]

关于小程序胡言乱语

image标签 有默认宽高 320 × 240 mode属性决定图片的显示方式和宽高适配 * scaleToFill:默认;不缩放直接拉伸至满image元素 * aspectFit:保持纵横比,确保长边被显示,常用于于轮播图 * widthFix:保持纵横比,高度根据宽度等比例拉伸...[2020/5/19]

微信小程序手动添加收货地址省市区联动

微信小程序手动添加收货地址省市区联动

本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码,供大家参考,具体内容如下 先看效果图 html部分 用小程序的piceker-view 嵌入页面的滚动选择器 <picker-view indicator-style="height: 5...[2020/5/19]

微信小程序开发之获取用户手机号码(php接口解密)

后边要做一个微信小程序,并要能获取用户微信绑定的手机号码。而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如既往的乱,如果没有对小程序开发文档有一个整体的了解,搞懂解密流程还是有点难的。这里把小程序从请求用...[2020/5/18]

微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序,有两种方法:1.超链接;2.点击按钮。 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... "navigateToMiniProgramAppIdList": [ ...[2020/5/18]

微信小程序pinker组件使用实现自动相减日期

首先,我这里使用pinker组件代码为 <view cla ="section"> <view cla ="section__title">开始时间</view> <picker mode="date" value="{{dat...[2020/5/7]

微信小程序中使用 async/await的方法实例分析

本文实例讲述了微信小程序中使用 async await的方法。分享给大家供大家参考,具体如下: 微信小程序中有大量接口是异步调用,比如 wx.login()、wx.request()、wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了 succe ()、fail() ...[2020/5/6]

微信小程序实现滑动操作代码

前言 本文使用动画组件wx.createAnimation来实现滑动操作: 1. 左滑动显示操作项区域; 2. 点击操作项触发相应方法; 3. 右滑动和点击行收起操作项; 4. 点击“删除”并确定则删除该条数据。 最终效果如下: 实现过程 1. 文件index...[2020/4/24]

云开发(小程序端,web端+博客搭建部署)

视频讲解 小程序端 云函数 const cloud = require("wx-server-sdk"); cloud.init({ env: "xly-ba27v", }); const db = cloud.database(); c...[2020/4/21]

bili-云开发讲解

小程序端 云函数 const cloud = require("wx-server-sdk"); cloud.init({ env: "xly-ba27v", }); const db = cloud.database(); const t...[2020/4/21]

小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

背景 公司项目开发中,发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上,物理Home键被取消,改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决方案 使用已知底部小黑条高度为34px/68...[2020/4/18]

小程序云函数中用group分组查询,只能查询20条,怎么解决?

小程序云函数中用group分组查询,只能查询20条,怎么解决?

小程序云函数中用group分组查询,只能查询20条,怎么解决? 用滚动条每次加10加载,希望对您有帮助。 fetchNickYMCount: function() { db.collection(''findingList'').aggregate() .group({ _id:...[2020/4/13]

iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结。 前言 在苹果 iPhoneX 、iPhone XR等设备上,可以看到物理Home键被取消,改为底部小黑条替代ho...[2020/4/8]

微信小程序纯文本实现@功能

微信小程序纯文本实现@功能

前言 大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能。实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可。主要的复杂点在于一键删除功能与变色功能,web端可以使用现成库 caret.js 或者 At.js 来实现。但笔者需要在小程序中实现这个功能,而且在...[2020/4/8]

mpvue实现微信小程序快递单号查询代码

mpvue是什么? mpvue 是一套定位于开发小程序的前端开发框架,其核心目标是提高开发效率,增强开发体验。使用该框架,开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为...[2020/4/3]

功能完善的小程序日历组件的实现

功能完善的小程序日历组件的实现

小程序日历组件 日历组件,表单组件绝逼是前端开发的一个噩梦,尤其要做好一个旅游项目的日历,变态需求特别多,要在小程序中实现携程app的日历,还要兼顾性能问题。 自定义横向/纵向日历 自定义区间大小 自定义日期内容 指定节假日 支持跨月显示 难点 ...[2020/3/31]

开发Node CLI构建微信小程序脚手架的示例

本文介绍了 Node CLI 构建微信小程序脚手架的示例,分享给大家,具体如下:     目的 由于目前公司的 TOC 产品只要是微信小程序,而且随着业务的扩展, 会有更多的需求,创建更多的小程序,为了让团队避免每次开发前花费大量时间做比如工程化的一些...[2020/3/27]

微信小程序分享小程序码的生成(带参数)以及参数的获取

1.小程序码介绍 从微信小程序开发文档上我们可以了解到,目前微信支持两种二维码(左),小程序码和小程序二维码(右)。官方推荐使用小程序码,因为小程序码具有更好的辨识度。   官方提供生成小程序码的两种方式 一种适用于需要的码的数量相对较少的业务场景:接口地址 htt...[2020/3/25]

微信小程序scroll-view点击项自动居中效果的实现

scroll-view | 微信开放文档 效果 代码 布局样式代码省略,以下只展示逻辑代码 <scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation cla ="scroll...[2020/3/25]

微信小程序点击item使之滚动到屏幕中间位置

1.需求 想做类似猫眼电影选场次会自动滚动到屏幕中间的效果 如图是最终效果  2.分析 实现这种效果的方法有三种: 1.直接使用原生CSS+js; 2.使用swiper,一屏显示多个item,点击item会自动滚动到中间 3.使用微信的scroll-vi...[2020/3/25]

微信小程序后端无法保持session的原因及解决办法问题

之前未接触过微信小程序项目,在使用jQuery库的ajax中很正常,服务器也能保持会话状态。在使用wx.request中发现会话一直不能保持,一开始以为是服务器php.ini配置错误, 在代码中加入se ion_start()或者开启se ion.auto_start() 确认...[2020/3/20]

微信小程序保持session会话的方法

        一般我们web网站都会有cookie来保存se ion ID,将用户和服务器保持在一次会话中,但是很遗憾,微信小程序不支持cookie,他的每一次请求就是一次会话,这样就会产生一个问题,每次请求都需要确...[2020/3/20]

微信小程序利用button控制条件标签的变量问题

问题描述 在小程序中如何利用button按钮来实现控制条件标签的变量呢?这也许是许多小伙伴们的问题,今天就来简单的给大家演示一遍。 解决方案 第一步: 首先打开微信公众平台,将一个 primary 的 button 按钮代码复制到开发平台上,再为其绑定一个名为 ” bindfirs...[2020/3/16]

455
2
记录数:306 页数:1/71234567下一页尾页
加载更多
 友情链接: NPS  问卷模板