微信小程序,微信小程序开发教程

微信小程序中往数组追加元素

2021-06-04

在微信小程序开发过程中，有时我们需要往数组中追加一个字段和对应的值，我们可以通过下面的方法来追加。假设有个数组starsKey，如下图所示：var;starsKey;=;[{;id:;2,;name:;"PHP开发",;stars:;1}，{;id:;3,;name:;"JAVA开发",;stars:;1}，{;id:;4,;name:;"Python开发",;stars:;2}]; 现有数组：arr1var;arr1;=;[{reason:;"1"},{reason:;"2"},{reason:;"4"}] 我们如何往数组追加元素呢？可以采用for循环方法：;;for(var;p=0;;p<arr4.length;;p++){ ;;;;;;;;for;(var;_p;=;0;;_p;<arr1.length;;_p++);{ ;;;;;;;;;;arr4[p].reason=arr

解决微信小程序上滑白边问题

2021-06-04

5439 0

在开发微信小程序的时候，如果加了背景颜色在苹果手机上运行，向下滑动会出现白边白边问题，如下图的粤康码：1、解决方法也很简单：打开app.json文件，修改如下配置，加入;"backgroundColor": "#d81e06"{ ;;"pages":;[ ;;;;"pages/index/index", ;;;;"pages/logs/logs" ;;], ;;"window":;{ ;;;;"backgroundTextStyle":;"light", ;;;;"navigationBarBackgroundColor":;"#d81e06", ;;;;"navigationBarTitleText":;"小程序", ;;;;"navigationBarTextStyle":;"white", ;;;;"backgroundColor":;"#d81e06" ;;}, ;;"style":;"v2", ;;"sitemapLoca

微信小程序实现五星好评案例例子参考

2021-05-29

3327 0

前景：小程序这几年很火，很多公司，特别是服务行业公司做一个满意度评分小程序还是不错的。效果图展示：.wxml代码： <view;class="star-title">1、品质效果</view> <view;class="star-pos"> ;;<image;class='stars';bindtap="changeColor";data-index='0';data-no="{{item}}";wx:for="{{stardata}}";wx:key="index" ;;;;;;;;src="{{flag[0]>=item?;'/asset/img/icon/star-red.png':;'/asset/img/icon/star-empty.png'}}";/> ;;<view;style='margin-left:;30rpx;'>{{startext[0]

微信小程序跳转到其他小程序方法

2021-05-16

4505 0

我们在开发小程序时，有时需要关联其他小程序，就可以在小程序中增加一个按钮，添加点击方法，然后跳转到其他小程序。wxml代码示例：<view;class="nav_item";bindtap="openwx";data-id="wxaa8473e0378e72be";data-path=""> <image;src="/asset/img/yx.png";class="navicon"></image> <view;class="nav_name">游戏</view> <view;class="nav_r"><image;src="/asset/img/more.png"></image></view> </view> 添加点击事件和赋予data-id;和data-path的值js文件代码示例：;;openwx

微信小程序实现分享至朋友圈方法

2021-04-09

2916 0

分享到朋友圈的展示形式是小程序logo＋小程序名称微信小程序直接分享到朋友圈的实现：方法很简便：在js中添加onShareTimeline()函数即可，这一分享是要有前提的，从小程序开发文档，可以看到，基础库得从2.11.3开始才支持分享至朋友圈的，如果没更新基础库会出现以下灰色的。更改基础库，加入分享代码既可，重新提交版本审核既可注意事项"shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮示例

小程序登录、用户信息相关接口调整以及获取用户信息方法

2021-04-04

2110 0

为优化用户的使用体验，平台将进行以下调整：2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。新增getUserProfile接口（基础库2.10.

微信小程序如何默认按钮button去掉默认样式

2021-03-20

2609 0

微信小程序和HTML去掉按钮样式不一样：;;;;<view;class="button-sp-area"> ;;;;;;<button;type="primary";plain="true">按钮</button> ;;;;</view> 可以加下以下样式去掉带有虚边的样式button::after{ ;;;;border:none; } 修改button按钮disabled为true时会出现灰色字体浅灰色背景的样式button[disabled]:not([type]);{ ;;background-color:;#fff; ;;color:;#1e82d2;; } 修改button按钮点击时样式//;点击时样式 .button-hover;{ color:rgba(0,;0,;0,;0.6); background-color:#fff; }

微信小程序时间点击页面获取用户头像信息

2021-02-08

1966 0

微信小程序获取头像信息必须使用点击按钮来获取，这个实际也是，只是想法思路不一样，我们可以把背景设置成透明，当用户点击屏幕触发按钮，这里构建一个透明按钮，宽高通过获取手机界面宽高，来赋予。;let;sysInfo;=;wx.getSystemInfoSync(); ;;;;;;;;//;获取微信界面大小 ;;;;;;;;let;screenWidth;=;sysInfo.screenWidth; ;;;;;;;;let;screenHeight;=;sysInfo.screenHeight; ;;;;;;;;const;wxLoginBtn;=;wx.createUserInfoButton({ ;;;;;;;;;;;;type:;'text', ;;;;;;;;;;;;text:;'', ;;;;;;;;;;;;style:;{ ;;;;;

小程序自定义轮播图样式

2020-04-05

3518 0

小程序自定义轮播图样式以下是各案例，仅供大家参考。效果展示：index.wxml代码：<view> ; ;;<view> ;;;;<swiper;indicator-dots="{{indicatorDots}}" ;;;;;;;;;;autoplay="{{autoplay}}";interval="{{interval}}";duration="{{duration}}";circular="{{circular}}";bindchange="swiperChange"> ;;;;;;<block;wx:for="{{banner}}"> ;;;;;;;;<swiper-item> ;;;;;;;;;;<view> ;;;;;;;;;;<image;

微信小程序跳转到外部、其他小程序

2020-04-04

2915 0

微信小程序跳转到外部、其他小程序app.json文件，添加小程序appId"navigateToMiniProgramAppIdList":;[ "wx867ea05eaf079b91", "wx18a2ac992306a5a4" ]WXML文件：<view;class="user_draw";bindtap="openwx"> <view;class="word"><image;src="/asset/img/small.png"></image><view;class="tname">其他小程序</view></view> <view;class="wimg"><image;src="/asset/img/more.png

小程序实现分类内容下拉刷新，上拉加载更多

2020-04-01

3099 0

效果演示：小程序上拉加载更多，下来刷新，在项目开发中是最常见，以下是一个简单的案例，供大家参考wxml文件代码: <view;class="out"> ;; ;;;;<view;class='left'> ;;;;<block;wx:for="{{category}}"> ;;;;;;<view;class='nav-item;active';;wx:if="{{tags;==;item.id}}";data-id="{{item.id}}";bindtap="btn_cate">{{item.book_cate}}</view> ;;;;;;<view;wx:else;data-id="

微信小程序刷新当前页面，并跳转到其他页面

2020-03-31

2769 0

刷新当前页面：//;首先判断当前页面加载的所有页面的数组，数组中最后一个就是当前页面，然后onload当前页面。 if;(getCurrentPages().length;!=;0);{ ; ;;//刷新当前页面的数据 ;;getCurrentPages()[getCurrentPages().length;-;1].onLoad() }刷新当前页面并跳转到指定页面：这里以跳转到tobar页面为演示：//;首先判断当前页面加载的所有页面的数组，数组中最后一个就是当前页面，然后onload当前页面。 if;(getCurrentPages().length;!=;0);{ ; ;;//刷新当前页面的数据 ;;getCurrentPages()[getCurrentPages().length;-;1].onLo

小程序富文本解析器towxml3.0的使用

2020-03-26

4915 0

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。;特色：;1、可控制的音频播放器（可自行调节样式，解决原生audio在部分iPhone上不能自动播放的情况）2、支持代码语法高亮3、支持emoji表情4、支持上标、下标、下划线、删除线、表格、视频、图片（几乎所有html元素）……5、支持typographer字符替换6、多主题动态支持7、极致的中文排版优化8、Markdown TodoList下载地址：https://github.com/jyblogs/towxml或者：git clone git@github.com:

小程序头部滚动导航，置顶头部导航

2020-03-25

2671 0

小程序头部滑动导航例子，主要运用微信的 scroll-view 和样式;white-space: nowrap;wxml文件代码：<view;class="container">  <view;class='totle-nav'> <scroll-view;class='scroll-wrap';scroll-x="true";style='width:100%;'> <text;class="active">导航1</text> <text>导航2</text> <text>导航3</text> <text>导航4</text> <text>导航5</text> <text&

微信小程序，滑动选项卡案例

2019-11-19

3105 0

微信小程序，滑动选项卡：1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。;2、swiper组件的current组件用于控制当前显示哪一页;3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页效果图：wxml代码：<view;class="tabbox"> <scroll-view;scroll-x="true";class="tab-h";scroll-left="{{scrollLeft}}"> ;;<view;class="tab-item;{{currentTab==0?'active':''}}";dat

微信小程序置顶导航，替代原生导航栏

2019-11-16

2893 0

效果图：思路：Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏，wx.getSystemInfoSync获取可使用窗口高度wxml代码： <view;class="header";style="padding-top:{{statusBarHeight}}px"> <view;class="searchbtn"> <image;src="/pages/asset/img/search_03.jpg";class="search_pic"></image> <view;class="search_word">;哪吒之魔童降世</view>

微信小程序-实现旋转木马轮播功能

2019-11-16

3195 0

效果图：技术要点：自动滚动+手动拖拽（原生组件帮我们完成 Property：autoplay）;面板指示点（原生组件帮我们完成 Property：indicator-dots）;左右可以露出非Active状态图的边缘（即Quiet状态，后文class会以这两个名字定义）（原生组件帮我们完成 Property：previous-margin、next-margin）;图片滚动到中心位置放大，滚动出去缩小（我们手写实现，利用技术点中提到的滚动回调+条件渲染。其中滚动回调用 Property：bindchange）.wxml 代码: <view;class="lunbo"> <swiper;class='swip

微信小程序API五种页面跳转方法总结

2019-07-20

3510 0

//;保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 //;注意：调用;navigateTo;跳转时，调用该方法的页面会被加入堆栈，但是;redirectTo; wx.navigateTo({ ;;url:;'page/home/home?user_id=111' }) //;跳转到页面;A wx.navigateBack({ ;;delta:;2 }) //;关闭当前页面，跳转到应用内的某个页面。 wx.redirectTo({ ;;url:;'page/home/home?user_id=111' }) //;跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。 wx.switchTab({ ;;url:;'p

微信小程序实现购物车全选功能

2019-07-19

4473 0

微信小程序购物全选与反选，CheckBox（全选、全不选）的操作！效果图：wxxml文件：<view;class="jybox"> <view;class="orderlist";wx:for="{{listData}}";wx:key=""> <view;class="order_left"> <checkbox-group;bindchange="checkboxChange"> <checkbox;value="{{item.code}}";class="cheack";checked="{{item.checked}}"/> </checkbox-group> <image;src="{{item.img}}";mode=&quo

微信小程序单图上传和多图上传

2019-06-23

3562 0

图片上传主要用到1、wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照。参数Object object属性类型默认值必填说明countnumber9否最多可以选择的图片张数sizeTypeArray.<string>['original', 'compressed']否所选的图片的尺寸sourceTypeArray.<string>['album', 'camera']否选择图片的来源successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）object.sizeType 的合法值值说明最

微信小程序 form 表单提交

2019-06-09

3625 0

表单。将组件内的用户输入的switch;input;checkbox;slider;radio;picker;提交。当点击;form;表单中 form-type 为 submit 的;button;组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。.wxml代码<form;bindsubmit="formSubmit";bindreset="formReset"> ;;<view;class="section"> ;;;;<view;class="section__name">姓名</view> ;;;;<input;name="name";class='name'/> ;;</view> ;;;<view;class=

微信小程序中往数组追加元素

解决微信小程序上滑白边问题

微信小程序实现五星好评案例例子参考

微信小程序跳转到其他小程序方法

微信小程序实现分享至朋友圈方法

小程序登录、用户信息相关接口调整以及获取用户信息方法

微信小程序如何默认按钮button去掉默认样式

微信小程序时间点击页面获取用户头像信息

小程序自定义轮播图样式

微信小程序跳转到外部、其他小程序

小程序实现分类内容下拉刷新，上拉加载更多

微信小程序刷新当前页面，并跳转到其他页面

小程序富文本解析器towxml3.0的使用

小程序头部滚动导航，置顶头部导航

微信小程序，滑动选项卡案例

微信小程序置顶导航，替代原生导航栏

微信小程序-实现旋转木马轮播功能

微信小程序API五种页面跳转方法总结

微信小程序实现购物车全选功能

微信小程序单图上传和多图上传

微信小程序 form 表单提交

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

微信小程序中往数组追加元素

解决微信小程序上滑白边问题

微信小程序实现五星好评案例例子参考

微信小程序跳转到其他小程序方法

微信小程序实现分享至朋友圈方法

小程序登录、用户信息相关接口调整以及获取用户信息方法

微信小程序如何默认按钮button去掉默认样式

微信小程序时间点击页面获取用户头像信息

小程序自定义轮播图样式

微信小程序跳转到外部、其他小程序

小程序实现分类内容下拉刷新，上拉加载更多

微信小程序刷新当前页面，并跳转到其他页面

小程序富文本解析器towxml3.0的使用

小程序头部滚动导航，置顶头部导航

微信小程序，滑动选项卡案例

微信小程序置顶导航，替代原生导航栏

微信小程序-实现旋转木马轮播功能

微信小程序API五种页面跳转方法总结

微信小程序实现购物车全选功能

微信小程序单图上传和多图上传

微信小程序 form 表单提交

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录