小程序
今天星期八
这个作者很懒,什么都没留下…
展开
-
js 计算两个日期之间相差的天数,并适配 Ios
【代码】js 计算两个日期之间相差的天数,并适配 Ios。原创 2022-12-01 10:36:38 · 1014 阅读 · 0 评论 -
微信小程序实现输入车牌号码的功能(附效果图)
微信小程序实现输入车牌号码的功能原创 2022-10-06 15:16:17 · 10698 阅读 · 4 评论 -
微信小程序中 在xwml 中使用外部引入的 js进行判断计算
微信小程序中 在xwml 中使用外部引入的 js进行判断计算原创 2022-06-29 18:01:27 · 1464 阅读 · 0 评论 -
微信小程序获取图片的宽高,以及如何获取手机设备的宽高?
如何在微信小程序中获取图片的宽高 ?原创 2022-05-03 17:42:23 · 4771 阅读 · 0 评论 -
微信小程序解决跳转时携带参数乱码的问题 ?
问题场景在微信小程序中,页面之间传递参数时,参数时链接时,在下个页面出现链接乱码的问题解决办法(先通过 encodeURIComponent 进行编码)wx.navigateTo({ url: '/pages/hot_detail_url/hot_detail_url?id=' + e.currentTarget.dataset.id + '&url=' + encodeURIComponent(e.currentTarget.dataset.url)})在接收页面中进行解码原创 2022-04-11 14:52:33 · 2977 阅读 · 1 评论 -
微信小程序使用 swiper时 指示点的位置控制
微信小程序使用 swiper时 指示点的位置控制.wx-swiper-dots.wx-swiper-dots-horizontal { margin-bottom: 200rpx;}通过以上代码就可以控制指示点的位置原创 2022-03-29 09:37:47 · 2635 阅读 · 1 评论 -
解决微信小程序中 swiper在 ios 中圆角不显示的问题
解决微信小程序中 swiper 在 ios 中圆角不显示的问题(在android中可正常显示)解决办法?.swiper {// 给swiper 添加以下属性 transform: translateY(0); }原创 2022-01-12 08:47:37 · 3771 阅读 · 2 评论 -
微信小程序 引导页
实现打开小程序有引导页面最后一张有立即体验的按钮,如何实现 ?<swiper > <block wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="item" > <swiper-item class="swiper-items" > <image class="swiper-image" src="{{item}}"></image原创 2021-12-22 09:11:36 · 1707 阅读 · 0 评论 -
微信小程序 中使用 textarea 时,输入字数最大长度如何不受限制
微信小程序使用textarea ,输入字数大于140 时,输入不了,如何进行设置,使得字数不受限制 ?maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度 <textarea maxlength="-1" class="input-area" placeholder="请详细说明问题描述" ></textarea>...原创 2021-09-22 09:48:37 · 3463 阅读 · 0 评论 -
微信小程序登录注册全流程 使用 wx.getUserProfile
微信小程序 登录注册全流程 (使用 wx.getUserProfile)登录注册三步授权先看下图 :实现步骤如下:step1 授权登录,获取用户基本信息<button class='login_btn' bindtap="userLogin" style="width:500rpx;">第一步(获取昵称,头像)</button>userLogin(res) { var that = this; var user = {}; wx.getUs原创 2021-08-11 10:05:43 · 1461 阅读 · 1 评论 -
微信小程序 使用微信支付功能
微信小程序使用微信支付功能wx.requestPayment({ // 注: 以下res.data.xxx 是接口调用返回的数据(由后端进行返回 ) timeStamp: res.data.data.timeStamp, //时间戳 nonceStr: res.data.data.nonceStr, //随机字符串 package: res.data.data.package, //统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*** signT原创 2021-08-11 09:32:01 · 332 阅读 · 0 评论 -
在vue中实现微信的分享至好友、分享至朋友圈的功能
如何在Vue 中实现微信分享至好友/朋友圈的功能 ?官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html实现方法:在vue 页面初始化时created(){code…} 进行 codeing调用接口实现create(){ this.getShareInfo(); // 页面初始化调用此方法;}methods:{ getShareInfo(){ // 实现如下: //原创 2021-05-27 17:18:59 · 1226 阅读 · 0 评论 -
微信小程序 wx:for 控制显示的条数
通过wx:if 控制wx:for 循环显示的条数wx:if="{{index<3}}"<view wx:for="{{noticeList}}" wx:key="index" catchtap="checkUrl" data-type="webview" data-webview="{{item.url}}" wx:if="{{index<3}}"> <view class="notice-img-box"> <image class="noti原创 2021-02-19 09:20:55 · 1921 阅读 · 0 评论 -
微信小程序(脱敏处理,通过身份证判断性别,时间段的倒计时)
微信小程序 (用到的脱敏)脱敏身份证号方法一:var idcard = res.data.data.userCertNum;var idcarddetail = idcard.replace(/(\d{6})(\d+)(\d{4})/, function(x, y, z, p) { var i = ""; while (i.length < z.length) { i += "*" } return y + i + p})方法二:const card =原创 2021-02-07 10:33:40 · 2818 阅读 · 0 评论 -
微信小程序 使用 wx.downloadFile()方法
实现 url 路径的图片的显示进行保存wx.downloadFile({ url: // 图片在线 url , success (res) { if (res.statusCode === 200) { // console.log("res.tempFilePath",res.tempFilePath); 微信 临时路径 wx.hideLoading(); that.setData({ 'isSubmitIng': false原创 2021-01-30 15:24:44 · 12411 阅读 · 3 评论 -
微信小程序 单选按钮自定义
微信小程序 单选按钮 radio 相关操作 <radio-group class="radio-group" bindchange="checkboxChange" data-id="{{item.id}}"> <label class="radio" bindtap=""> <radio value="1" /> <text>在我市购买或租赁住房并实际居住</text> </label>原创 2021-01-29 17:41:22 · 1091 阅读 · 0 评论 -
微信小程序实现自定义的弹窗
微信小程序实现自定义的弹窗wx.showModal({ title: '条件', content: "弹框内容", confirmText:'符合', cancelText:'不符合', success: (res) =>{ if (res.confirm) { //点击符合按钮 } else if (res.cancel) { //点击不符合按钮 } }})...原创 2021-01-29 17:36:22 · 636 阅读 · 0 评论 -
微信小程序 实现两级联动
微信小程序实现两级联动首先模拟数据 (在utils 文件夹下创建 js 文件 )(注:最外层的value 与内部孩子模块的field1一致)module.exports = [ { "value": "001", "name": "肃州区", "list": [{ "value": "1", "name": "测试1", "field1": "001" }, { "value": "2",原创 2021-01-29 17:31:56 · 1280 阅读 · 0 评论 -
前端项目集(踩坑)
小程序标签(空格分隔): 小程序三目运算符:<view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>要给轮播图设置圆角,不滚动的时候还好,一但滚动圆角就无效了。给最外面盒子加上“overflow: hidden” 就好了vue element-ui 后台管理element-ui dialog弹窗默认的点击空白处也就是非弹窗区会关闭,有时候不太合适,所以要设置为不可关闭。它本身自原创 2020-08-28 11:25:52 · 301 阅读 · 0 评论 -
微信小程序自定义组件
微信小程序自定义组件具体实现要做自定义组件,在小程序中实现弹窗组件,基本效果图如下。Step1我们初始化一个小程序,删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,在 components 组件中新建一个 Dialog 文件夹来存放我们的弹窗组件,在 Dialog 下右击新建 Component 并命名为 dialog 后,会生成对应的...原创 2019-06-05 15:38:25 · 204 阅读 · 0 评论 -
小程序中wx.setStorage和 wx.getStorage
主要通过一个小例子,用来实现实时搜索页面结构<view class="search-header"> <input class="search-input" placeholder='搜索' bindinput='handleInputChange' /> <view class="search-btn" bindtap='handleSearch'&...原创 2019-06-13 11:27:03 · 2092 阅读 · 0 评论 -
WeUI使用步骤
先去下载小程序版weui下载地址:https://github.com/Tencent/weui-wxss可以将整个文件下载下来,将其中的dist文件夹导入到独立的小程序中作为参考如下图注意:样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss。将style文件夹拷贝到小程序根目录中weui.wxss...原创 2019-06-14 09:51:54 · 18443 阅读 · 0 评论 -
WeUi安装步骤
使用方法一:使用bower进行安装 bower install --save weui方法二:使用npm进行安装npm install --save weui开发git clone https://github.com/weui/weui.gitcd weuinpm install -g gulpnpm installgulp -ws运行gulp -...原创 2019-06-14 10:04:32 · 3071 阅读 · 0 评论 -
小程序中用Echarts
下载下载地址:官方git网站。请按照下图可以进行下载,也可以通过git 手册.引入项目中第一步:拷贝文件,将 echarts-for-weixin-master 项目里面的 ec-canvas 文件夹拷贝到项目目录中,第二步:在需要显示页面配置文件中配置组件及引入。.json 配置组件{ "usingComponents": { "ec-canva...原创 2019-06-14 15:31:46 · 1720 阅读 · 0 评论 -
小程序中的Animation动画
小程序动画三步走在需要动画效果的元素上给animation属性绑定一个变量,假设是textLeftAnimation在需要的时机调用api创建动画对象并描述动画效果利用this.setData() 将动画对象.export() 方法赋值到textLeftAnimation变量中。例:1.在元素中的属性animation中绑定对象变量,即用代码如下表示<view style...原创 2019-06-10 14:12:04 · 4310 阅读 · 0 评论 -
和风天气注册登录
注册和登录新用户注册第一步 填写注册信息请访问 https://console.heweather.com/register第二步 邮箱激活验证请访问你的邮箱,应该收到一封来自和风天气的注册激活邮件,点击其中的激活链接即可如果未能收到注册激活邮件,请先检查你的垃圾邮件第三步 登录你的账号请访问 https://console.heweather.com...原创 2019-06-17 10:56:41 · 2885 阅读 · 0 评论 -
简易的视频播放器的制作以及进度条
效果图如下用到的组件是slider属性名作用默认值min滑动器最小值0max滑动器最大值100step步长,取值必须大于 0,并且可被(max - min)整除1disabled是否禁用falsecolor背景条的颜色(请使用 backgroundColor)#e9e9e9selected-color已选择的颜色(...原创 2019-06-25 09:14:14 · 1908 阅读 · 0 评论 -
小程序侧边栏切换
效果图如下:实现步骤:sort.wxml<!--主盒子--><view class="con"> <!--左侧栏--> <view class="nav_left"> <block wx:for="{{cateItems}}" wx:key="*this"> <!--当前项的id等于item项的id,那...原创 2019-06-17 15:42:06 · 2656 阅读 · 4 评论 -
movable-view
movable-view可移动的视图容器,在页面中可以拖拽滑动。movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。属性名作用默认值direction设置movable-view的移动方向属性值有all、vertical、horizontal、noneinertiamovable-view是否带有惯性true...原创 2019-06-25 13:17:34 · 1224 阅读 · 0 评论 -
小程序页面跳转总结
要求:index.wxml 页面,跳转到 logs.wxml 页面用到的小程序控件 navigator属性名类型说明urlString跳转链接,可以传递参数open-typeString跳转方式,参数可为navigateBack、redirect、switchTabdeltaNumber当 open-type 为 ‘navigateBack’ 时有...原创 2019-06-18 09:06:47 · 151 阅读 · 0 评论 -
小程序中的计时器
效果图如下布局(.wxml)<view class="countTime">{{timecount}}</view><button class="aaa" bindtap="start">开始</button><button class="aaa" bindtap="stop">暂停</button><but...原创 2019-06-26 16:28:56 · 6691 阅读 · 1 评论 -
微信小程序侧边栏二级联动
实现效果如下实现步骤样式布局(.wxml文件) <scroll-view scroll-y="{{true}}" style="height:{{height}}px;" class="nav-right-menu"> <!-- 一级菜单 --> <view class="nav-...原创 2019-06-24 10:12:22 · 2460 阅读 · 3 评论 -
小程序跑马灯效果
先看效果图实现步骤:index.wxml文件<!-- 跑马灯效果 --><view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;...原创 2019-06-24 17:19:29 · 676 阅读 · 0 评论 -
在TabBar里面写的页面之间进行传值应该通过onLoad函数
问题描述例如下图,在tabBar里面写的页面,是不能通过navigator 进行页面之间的传值的,那么除了navigator 还有别的传值方式吗?还有一种别的方式是:通过如下方式://第一个页面的JS文件const app=getApp();// 立即购买 immeBuy() { var _this=this; console.log("go") g...原创 2019-07-03 14:50:59 · 1338 阅读 · 0 评论 -
小程序初识
1 首先创建一个新的项目(选择目录,appID)2 全局配置 (app.json) 进行页面创建并配置pages 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。window 用于设置小程序的状态栏、导航条、标题、窗口背景色。eg...原创 2019-06-05 15:21:04 · 135 阅读 · 0 评论