一：实用小技巧作者：朕君无戏言，来自原文地址
CSS:
实现渐变色 第一个是起点颜色，慢慢过渡到第二个颜色
从上到下的线性渐变：
background: linear-gradient(red, blue);
从左到右的线性渐变：
background: linear-gradient(to right, red , blue);
裁圆角 设置弧度 顺序是 左上角 右上角 右下角 左下角 （顺时针）
border-radius: 3px 0px 0px 3px;
JS:
调用电话 //拨打手机 calling:function(event){ console.log('拨打手机') console.log(event) var that = this; wx.makePhoneCall({ phoneNumber:that.data.phone, //此号码并非真实电话号码，仅用于测试 success:function(){ console.log("拨打电话成功！") }, fail:function(){ console.log("拨打电话失败！") } }) },
下拉刷新，上拉加载更多 1）首先在要刷新类的.json文件里添加 { "enablePullDownRefresh": true}
2）然后在js里实现"onPullDownRefresh"和"onReachBottom"方法即可 下拉事件 onPullDownRefresh: function() { console.log('刷新'); },
上拉事件 onReachBottom: function() { console.log(' 下一页'); },
注意：刷新可能会和scroll-view控件冲突 二：设置头像作者：KoalaShane，来自原文地址
最近在开发微信小程序 ，今天就记录下关于微信小程序怎么换头像的。
首先，小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。 整个系统分为两块视图层（View）和逻辑层（App Service）。简单的来说，就是不能使用html 、div 、p等等这些标签。另外，小程序使用FLex布局，关于Flex布局教程， 这是做好的一个页面，现在需要点击头像，更换自己喜欢的头像。 代码截图：
还是贴了代码，方便以后复制粘贴，哈哈。 <view class="info-items" bindtap="setPhotoInfo"> <text>头像</text> <view class="infotext"> <image wx:if="{{imgUrl!=null}}" class="userinfo-avatar" src="{{imgUrl}}" background-size="cover"></image> <image wx:else class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <image class="menu-item-arrow" src="/image/arrowright.png"></image> </view></view>
bindtap是事件绑定，相当于javascript里的onclick, 对最外层的view绑定了setPhotoInfo方法，方便用户点击所以绑定在最外层。
添加了一个变量imgurl，对image进行判断，如果imgurl不为空，则显示我们上传的图片，如果为空，就使用用户自己的头像，userInfo.avatarUrl 是获取用户头像。setPhotoInfo方法中，调用微信获取头像的API【wx.chooseImage】。 代码截图：
设置imgurl默认为空
that.setData({imgUrl:tempFilePaths}) 获取到上传的文件，赋值给imgurl。 页面完整WXML: <!--pages/more/info/info.wxml--><view class="container"> <view class="info-cont"> <view class="infoMain"> <view class="info-items" bindtap="setPhotoInfo"> <text>头像</text> <view class="infotext"> <image wx:if="{{imgUrl!=null}}" class="userinfo-avatar" src="{{imgUrl}}" background-size="cover"></image> <image wx:else class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <image class="menu-item-arrow" src="/image/arrowright.png"></image> </view> </view> <view class="info-items" bindtap="setName"> <text>名字</text> <view class="infotext"> <text class="info-motto">{{infoname}}</text> <image class="menu-item-arrow" src="/image/arrowright.png"></image> </view> </view> <view class="info-items"> <text>性别</text> <view class="infotext"> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" class="info-motto"> <view class="picker"> {{array[index]}} </view> </picker> <image class="menu-item-arrow" src="/image/arrowright.png"></image> </view> </view> <view class="info-items"> <text>手机号</text> <view class="infotext"> <text class="info-motto">13812345678</text> </view> </view> <view class="info-items" bindtap="getregion"> <text>地区</text> <view class="infotext"> <text class="info-motto">{{address}}</text> <image class="menu-item-arrow" src="/image/arrowright.png"></image> </view> </view> </view> <button type="warn" bindtap="warn" class="buttonExit" > 退出 </button> </view></view>
页面完整WXSS: /* pages/more/info/info.wxss */.info-cont{ border-top:solid 1px #f0f0f0; padding-top: 30rpx; display: flex; flex-direction: column;}.infoMain{ border-bottom:solid 1px #f0f0f0; display: flex; background-color: #fff; flex-direction: column; margin-bottom: 30rpx;}.info-items{ display: flex; justify-content: space-between; align-items: center; padding:20rpx 40rpx; border-top:solid 1px #f0f0f0;}.infotext{ display: flex; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 0 20rpx; border-radius: 50%;}.info-motto{ margin: 0 20rpx; color:#888;}.buttonExit{ margin:0 40rpx;}
三：数据存储与取值作者：KoalaShane，来自原文地址
在小程序开发的过程，经常要需要这个页面输入的数据，在下一个页面中进行取值赋值。 比如：
在A页面input输入框，输入电话号码，点击添加。需要在B页面电话区域中，显示刚刚输入的电话号码。 因为这是两个页面，就需要先存储，再取值。微信小程序提供了数据存储的API，wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中，如果重复会覆盖掉原来该 key 对应的内容。 思路是，在A页面，使用bindinput获取input输入的值，赋值给一个变量（自定义），点击添加按钮时，如果变量不为空，将变量的值存储在本地缓存中，在B页面，使用wx.getStorage(OBJECT) 方法取值; ps : 源代码在页面底部 代码如下：
对input输入框，绑定事件bindinput="bindKeyInput"，设置value="{{inputValue}}"，因为电话号码为数字，设置type="number"。对按钮添加点击事件bindtap="addbtn" 在JS文件中添加代码
B页面代码
在JS文件中，声明变量addtel。在页面切换过来的时候，取出我们刚存储的值，赋值给变量addtel。在需要显示电话号码的地方，用变量来接收。 在JS文件中添加代码 data:{ addtel : ''}
这里在onShow的方法中进行取值，当小程序启动，或从后台进入前台显示，就会触发 onShow。 不过，每个微信小程序都可以有自己的本地缓存，使用这些方法时，要注意本地缓存最大为10MB，wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）可以对本地缓存进行设置、获取和清理。。 也可以使用wx.clearStorage（wx.clearStorageSync）来清理缓存。 代码写完之后，进行测试。
在输入框中输入电话号码，点击添加。
OK，取值成功。 A页面源代码: <view class="add-page"> <input placeholder="输入手机号添加客户" type="number" bindinput="bindKeyInput" value="{{inputValue}}" /> <button type="warn" class="add-btn" bindtap="addbtn" >添加</button></view>
var app = getApp()Page({ data: { inputValue:'' }, bindKeyInput:function(e){ this.setData({ inputValue: e.detail.value }) }, addbtn:function(){ if(this.data.inputValue){ wx.redirectTo({ url: '../ordered/ordered' }) wx.setStorage({ key:"addTel", data:this.data.inputValue }) }else{ wx.showModal({ title: '手机号为空', content: '请输入手机号码', success: function(res) { if (res.confirm) { console.log('用户点击确定') } } }) } }, onload:function(){ //onload }})
B页面源代码： <view class="menu-item"> <navigator class="menu-item-main" > <text class="menu-item-name">电话</text> <view class="ordtel"> <text class="ordtext">{{addtel}}</text> <image class="menu-item-icon" src="/image/tel.png"></image> </view> </navigator></view>
var app = getApp()Page({ data:{ addtel : '' }, onShow:function(){ var that = this; wx.getStorage({ key: 'addTel', success: function(res) { console.log(res.data) that.setData({ addtel:res.data }) } }) }})
其他相关资料可以查阅小程序官方API， | 
收藏