微信小程序
文章平均质量分 81
Hillbox
这个作者很懒,什么都没留下…
展开
-
微信小程序-底部导航栏
注册一个小程序appId,新建自己的项目,了解小程序的框架结构。制作底部导航栏时,添加导航按钮关联页面,注意配置在app.json配置page时,要把第一个导航按钮页面放在第一个位,不然其他页面会覆盖。在app.json中添加list数组,每个数组是一个导航按钮。app.json"tabBar": { "selectedColor": "#1296db", "list": [ ...原创 2018-03-15 16:02:19 · 798 阅读 · 0 评论 -
Laravel+微信小程序(一)微信登录与授权
登录流程1、首次登录:保存openid到数据库,并把openid存入缓存;2、非首次登录,但未授权:仅把openid存入缓存;3、非首次登录,且已授权:从数据库读取用户信息。授权流程1、首次登录:点击授权按钮,调用授权函数,获得用户信息,将其与openid发送至后台,更新数据库,即可保存用户到数据库;2、非首次登录,但未授权:和首次登录一样;3、非首次登录,且已授权:不...原创 2020-03-20 04:06:40 · 6515 阅读 · 0 评论 -
微信小程序-微信支付详细介绍(Thinkphp后端代码)
流程如微信支付的文档,不再多说https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3一一分析一下每一步我们具体要做什么:1、小程序内调用登录接口,获取到用户的openid,api参见公共api【小程序登录API】一般我们在数据库保存了用户openid,所以我们是去数据库取。...原创 2018-10-17 14:42:45 · 3374 阅读 · 0 评论 -
微信小程序-原生步骤条
效果(步骤条颜色不对是录制工具的问题) 思路其实与轮播图类似,使用了两个并排的轮播容器,在滑动监听后,给图片加上移动和缩放动画。扩展可以用于标签页的切换。vue与微信小程序有类似的地方,所以微信小程序做出的效果,原理也可用于vue在网页上的应用。代码wxml<view class='window'> <view class='cont...原创 2018-09-20 09:58:58 · 6050 阅读 · 0 评论 -
微信小程序-原生轮播图(连续)
效果 思路下一页的原理如下,上一页则相反:先把最后的元素放到前面,再向前移动所有元素。涉及到绝对定位、transition动画、延时函数setTimeout缺点本案例没有考虑通过轮播点来跳转轮播图。例如,想从第一个轮播图,跳到第三个,这个案列是需要修改才能做到。代码wxml<view class='background'> <view...原创 2018-09-13 14:45:40 · 4639 阅读 · 2 评论 -
微信小程序-收货地址左滑删除
效果:思路:一、用相对定位和绝对定位,列表放在上层,删除按钮放在下层(z-index不要为负)。二、触摸事件判断用户是否左滑,有 bindtouchstart,bindtouchmove,bindtouchend 三个触摸事件。 1、bindtouchstart 记录触摸开始的点。开始点的坐标在 e.touches[0] 中,这是相对于屏幕的,也就是以屏幕左上方为...原创 2018-09-10 13:59:59 · 4585 阅读 · 9 评论 -
微信小程序-顶部提示框弹出动画
效果思路 参考CSS手册 http://www.w3school.com.cn/css3/css3_animation.asp 用css的animation属性做动画代码wxml:<view class="container"> <view class='anit {{show?"show":""}}'>请选择商品</view>..原创 2018-09-10 10:57:54 · 4902 阅读 · 0 评论 -
小程序-获取服务器上的图片
小程序页面要使用根目录的image文件夹下的图标,那么src为src=" 服务器的域名 + 图片的存放地址 + 图片名称 "如:<image src='http://wechat.square.com/images/timezhi.jpg' /> ...原创 2018-04-02 15:45:48 · 11888 阅读 · 4 评论 -
微信小程序-设置多个子元素水平居中或垂直居中
注:每种情况的美化CSS样式已经删去。<view class='father'> <view class='children'>子元素</view> <view class='children'>子元素</view> <view class='children'>子元素</view>&l原创 2018-04-02 15:20:54 · 10778 阅读 · 1 评论 -
微信小程序-动态列表项的顺序加载动画
效果 思路1、最开始用了纯CSS动画animation,发现动画需要重复写,于是换使用transition动画。2、使用onReady()可以让页面加载好再显示动画以免动画提前结束。代码wxml<!-- style中的主要为了区分已加载好的项和新数据,只有新数据有动画 --><view wx:for="{{lists}}" class="commo...原创 2018-09-12 15:29:01 · 5258 阅读 · 0 评论 -
微信小程序-微信登录wx.login(Thinkphp后端代码)
流程主要通过微信登录,获取用户的三个信息:user_id(用户id),user_image(用户头像url),user_name(用户昵称)。1、首次登录: 调用wx.login获取code,code发送给后台获取openid并存到用户表中,将返回user_id存到内存中。然后跳转到授权页面,当用户允许授权时,通过agreeGetUser方法获取到微信用户的信息保存到用户表中,并...原创 2018-08-15 17:59:24 · 16342 阅读 · 7 评论 -
小程序页面跳转、带参数跳转以及navigator跳转
一、单纯的页面跳转跳转到的页面分 tabBar 页面和 非tabBar 页面。url路径可以写相对和绝对路径。1、跳转到非导航页面,用 wx.navigateTo 方法wx.navigateTo({ url: '../person/goldcoin/index' //或者url: '/page/person/goldcoin/index'})2、跳转到tabB...原创 2018-03-26 17:11:47 · 25323 阅读 · 8 评论 -
微信小程序-仿朋友圈发布动态(包括后端上传图片)
仿照微信朋友圈做了一个界面如下,先看效果:1、点开界面2、选择图片3、点击上传4、动态显示 第一个页面的wxml:<view class='page'> <textarea class='text' bindinput="input" placeholder="分享动态" auto-height/> <view c...原创 2018-07-13 18:05:56 · 27831 阅读 · 32 评论 -
微信小程序-自定义单项选择器样式
效果:wxml:<view bindchange="radioChange"> <view class='list_item' wx:for="{{radioValues}}" data-index="{{index}}" bindtap='radioChange' style="{{index == radioValues.length-1?'borde...原创 2018-07-13 17:15:37 · 1732 阅读 · 0 评论 -
微信小程序-swicth改变样式
先上效果: wxml:<view class='list_item' style='margin:0;'> <text>PPT需要speech draft</text> <view class='switch' bindtap='switchFirst'> <view class='switch_bar...原创 2018-07-16 17:17:37 · 1127 阅读 · 0 评论