小程序系列
小丫么小菜菜
好东西大家一起分享
展开
-
微信小程序系列一:获取头像昵称
wx.getUserInfo(OBJECT)该方法经过官方改版后已不支持主动调用,要获取头像昵称等用户信息,需要用户主动授权。现在获取用户头像昵称等信息的方法如下:1.通过button触发 <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button> 所需信息都在e.detail....原创 2018-08-16 14:47:03 · 6266 阅读 · 0 评论 -
微信小程序系列十三:自定义进度条
知识点: 图层定位,颜色渐变wxml:<view class='T_jindu'> <view class='jindu2'></view> <view class='jindu'></view></view>css:.jindu{ height: 10rpx; backg...原创 2018-09-03 15:03:51 · 4129 阅读 · 0 评论 -
微信小程序系列十五:购物车选择规格颜色选中效果
wxml:<view> <view>规格:</view> <view class='dis'> <block wx:for="{{guige}}"> <view class="{{gindex==index?'color':''}}" bindtap='guige' data-ind原创 2018-09-04 17:56:25 · 4363 阅读 · 0 评论 -
微信小程序系列十四:tab点击切换效果
原理: 根据current渲染class样式;wxml: <view class='tabbar'> <view class="{{current==1?'tab-item item-on':'tab-item'}}" bindtap='select' data-index='1'>tab1</view> <view cla...原创 2018-09-04 17:36:39 · 589 阅读 · 0 评论 -
小程序系列十一:自定义对话框
自定义弹出框,效果类似showmodal;技术点:自定义组件dialog.wxml:<view class='wx_dialog_container' hidden="{{!isShow}}"> <view class='wx-mask'></view> <view class='wx-dialog'> ...原创 2018-08-29 16:48:32 · 1453 阅读 · 0 评论 -
微信小程序系列十:自定义底部导航
比较简单代码就不多贴。template:<template name="tabbar"> <view class="weui-tabbar"> <block wx:for="{{list}}" wx:key="index" wx:for-item="item"> <navigat原创 2018-08-29 16:30:16 · 2976 阅读 · 0 评论 -
微信小程序系列九:自定义导航栏
自定义头部导航app.json中设置:"navigationStyle": "custom";js代码:var vm=this;wx.getSystemInfo({ success: function (res) { let totalTopHeight = 68 if (res.model.indexOf('iPhone X') !==...原创 2018-08-29 16:20:02 · 326 阅读 · 0 评论 -
微信小程序系列十二:修改checkbox,radio,button默认样式
checkbox改变大小及颜色:checkbox .wx-checkbox-input { width: 28rpx; height: 28rpx;}checkbox .wx-checkbox-input.wx-checkbox-input-checked { background: #3296fa;}checkbox .wx-checkbox-input.wx-ch...原创 2018-08-31 17:55:40 · 911 阅读 · 0 评论 -
微信小程序系列八:使用view实现全选,单选
原理: 根据数据的checked属性值判断是否处于选中状态注意: 样式可以自己调整,这里不再添加wxml:<block wx:for="{{list}}" wx:key="*this.index"> <view data-index="{{index}}" data-name="{{item.id}}" class="{{item.check原创 2018-08-23 13:56:26 · 5256 阅读 · 0 评论 -
微信小程序系列七:删除列表数据
wxml:<view> <block wx:for="{{list}}" wx:key='id'> <view class='list'> <view class='left'>{{item.name}}</view> <view class='right' data-index='{{in..原创 2018-08-17 11:17:20 · 10009 阅读 · 2 评论 -
微信小程序系列六:星级评分
wxml代码:<block wx:for="{{start}}" wx:key="index"> <image src="{{fraction>=item?'/images/21_06.png':'/images/21_08.png'}}" class='start' data-current="{{item}}" bindtap='startIcon'&原创 2018-08-17 10:10:59 · 315 阅读 · 0 评论 -
微信小程序系列五:验证码倒计时
wxml代码:<view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type...原创 2018-08-16 15:33:55 · 236 阅读 · 0 评论 -
微信小程序系列四:表单提交
<view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type='number'...原创 2018-08-16 15:31:34 · 675 阅读 · 0 评论 -
微信小程序系列三:数据获取及数据渲染
1.数据获取:注意: 1.服务器地址要配置https 2.配置合法域名 3.本地调试记得在开发者工具勾选wx.request({ url: '接口地址', data: {}, success: function (res) {}, fail:function(err){}})2.数据渲染: js代码如下:...原创 2018-08-16 15:18:53 · 7271 阅读 · 2 评论 -
微信小程序系列二:获取用户openid
openid作为用户在小程序的唯一标识,获取方法如下:小程序端操作:app.jsApp({ onLaunch: function () { // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId wx.re...原创 2018-08-16 14:58:16 · 242 阅读 · 0 评论 -
微信小程序系列十六:公共方法的引用
公共js:utils.js导出方法:module.exports={公共方法名:定义的方法名}const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = da...原创 2018-11-23 16:29:31 · 829 阅读 · 0 评论