收集了一些小程序开发中常用到的知识点，记录一下。（小程序开发文档版本不断在更新，可能有些以后用不了的，这些发现了再更新，也请各位道友指正）
1.导航栏标题
与iOS开发很相似，小程序的导航栏也可以全局设置一下，在公共文件app.json中设置了导航栏相关样式如下：
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序组件",
"navigationBarBackgroundColor": "#f8f8f8",
"backgroundColor": "#f8f8f8",
"backgroundTextStyle": "light",
"enablePullDownRefresh": "true"
},
这个地方是全局设置，如果想要在不同的页面设置各自的标题属性，只需要在该子级文件中设置
{
"navigationBarTitleText": "页面1"
}
2.子页面调用公共js对象以便调用其方法
子页面想调用共公js的方法，需先在子页面js中先实例化app:具体过程如下
//app.js 中写子页面需要调用的公共方法
App({
// 自定义公共方法
commonFunction:function(){
return "公共方法"
}
})
在需要调用的子页面中，
var app = getApp();//先实例化应用
// console.log(app)//可查看公共app.js里面的方法
Page({
data: {
"label":app.commonFunction()//子页面中调用公共appjs的方法
}
})
3.嵌套循环时候，最好重命名下list和index
如果是嵌套循环，很容易出现多个list和index，例如表视图一样，所以在小程序中可以重命名 list 和index 方法为：wx:for-index='重命名' wx:for-list="重命名"
重命名list和index：
{{key}}--{{value}}
4.善用公共模板
在APP开发中，UI复用是一个很好的手段，在小程序上就是模板template。
在逛小程序联盟的时候发现了一个大湿总结的比我好，搬过来一下。
微信小程序中，如果几个页面中需要引用同一个header/footer，当定义了公共模板时，有两种引用方法如下：
方法一：在公共模板中定义template元素，利用 方法 ,这种方式只会显示公共模板的template里面的内容，之外的内容不会显示
//在wxml中
** 方法二:**
总结：import方式和imclude方式的不同在于前者仅引用公共模板中的template里面的内容后者仅引用template以外的内容，显而易见，include方式更简单一些，在wxml中只需要一句话即可。
5.小程序的尺寸单位rpx
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。
具体的这里有一片文章介绍的很详细，还有这个
6.小程序中用html、css
-
小程序中的选择器跟css的一样.
1：.class 2： #id 3: element 4:分组 element,element 5：伪类选择器 :after :before 注意这里加入在了元素之内的最后/最前 引入外部css文件的时候，只需像iOS中导入文件那样，在其css文件的开始写上 ： @import "外部地址" 即可。
html中布局用div很多，但是在小程序中用view标签，文本用text。
如果想用html原有的元素，必须在wxss中定义元素的display:block不然无法应用，且html元素的id选择器是无法应用的。
7.事件总结/冒泡事件
小程序的事件主要有：
touchtab 点击事件
touchstart 开始滑动
touchmove 滑动中
touchend 滑动结束
touchcancel 滑动中断
小程序中的wxml中绑定事件有两种：以touchtab为例 ，在wxml中必须有bind/catch不然无法实现上述事件
bindtouchtab和catchtouchtab bind的不会阻止事件冒泡（元素最里层到最外层函数执行），catch会阻止冒泡，只是冒泡到当前层结束
如果想在元素执行某事件时把元素的某个属性传到后台 可在元素中加入data-属性名称=“xxx”,在事件函数中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中绑定的的id或者其他属性clientX/Y 查看滑动手指距离屏幕左侧的位置，查看滑动位置也可以通过touchstart和和touchend的clientx/y获取
看到几个别人写的，瞬间石化，果断收藏。
8.点击更换图片
data: {
"banner":"../../../images/banner.jpg",
"daimaisrc":"../../../images/cart2_xz02.png",
"bianjie":"../../../images/cart2_xz04.png",
"shihui":"../../../images/cart2_xz05.png",
cityName:"",
getChannelByCityId:"",
carName:"",
carId:""
},
// 点击选择代买平台
daimaiClick: function(e){
console.log("-------d："+this.data.daimaisrc);
if(this.data.daimaisrc=="../../../images/cart2_xz02.png"){
this.setData({
daimaisrc: "../../../images/cart2_xz01.png"
})
}else{
this.setData({
daimaisrc: "../../../images/cart2_xz02.png"
})
}
},
9.锚点定位
{{index}}
//字母锚链定位
topZmClick: function (event) {
var letter = event.currentTarget.dataset.letter;
this.setData({
toView: letter
})
},
scroll-view {
height: 600px;
}
注：scroll-view必须要设置高度，不然无效
10.调用工具js文件/utils文件中的函数/变量
在小程序中，定义了一项工具文件utils,此文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤：
1：在utils被调用的js文件中，面向对象的方式模型输出： module.exports={要调用的函数名称：要调用的函数名称 }；
2：在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址")； 可以输出一下object就能看到被调用的方法了；
例子如下：
utils中被调用的js：
var URl='http://123.23.169';
var getImageurl=function(imageurl){
return URl+imageurl;
}
// 要引用这个文件的函数或者变量，除了在要引用的的js文件中模块化之外（var utils=require('js地址')），
// 在被引用的的js中要通过 module.exports={a:a}作为面向对象的变量输出函数如下：
module.exports={
URl:URl,//要引用的函数 xx:xx
getImageurl:getImageurl
}
要调用的js文件：
// 获得工具utils工具js里面函数,先模块化引用utils里面的js地址 reqiure('js地址')成一个面向对象
var utils=require('../../utils/app.js')
// console.log(utils) 可查看获得的函数
console.log(utils.getImageurl('iamgeaaddress.png'))
11.后台交互/wx.request({})方法/渲染页面方法 解析
小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})
data: {
logs:[]
},
onLoad:function(){
this.getdata();
}
getdata:function(){//定义函数名称
var that=this; // 这个地方非常重要，重置data{}里数据时候setData方法的this应为以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()的this了
wx.request({
url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//请求地址
data:{//发送给后台的数据
name:"bella",
age:20
},
header:{//请求头
"Content-Type":"applciation/json"
},
method:"GET",//get为默认方法/POST
success:function(res){
console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据
that.setData({//如果在sucess直接写this就变成了wx.request()的this了.必须为getdata函数的this,不然无法重置调用函数
logs:res.data.result
})
},
fail:function(err){},//请求失败
complete:function(){}//请求完成后执行的函数
})
},
wxml页面：
{{value.catname}}
12.scroll-view用法
如果屏幕中某元素的内容超过此元素的高度，可设置元素为scroll-view 为滚动状态元素，这样可以做到元素固定高度且元素内容滚动屏幕不滚动的效果；
scroll-view标签的主要属性分为以下几种：
scroll-x/y='true/false'----允许横向/纵向滚动
scroll-top/left='50'--设置滚动条出现的位置
bindscroll='' 滚动中触发的函数 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindscrolltoupper='scrolltoupper' 滚动到顶部/左边出发的函数scrolltoupper
bindscrolltolower='scrolltolower' 滚动到底部/右边出发的函数scrolltolower
upper-threshold='50' 距离顶部/左边多远时触发scrolltoupper函数
lower-threshold='50' 距离底部/右边多远时触发scrolltolower 函数
scroll-into-view=‘id名字.这个是用来设置此元素的某个子元素出现在最上方，id的名字为此子元素的id
13.广告轮播
微信小程序广告轮播元素 图片所在元素/swiper-item>
其中属性有：
autoplay:true,//是否自动播放
autoplaytxt:"停止自动播放",
indicatorDots: true,//指示点
// indicator-color："white",//指示点颜色 暂未启动
// indicator-active-color："red",//当前选中的指示点颜色暂未启动
indicatorDotstxt:"隐藏指示灯",
interval: 1000,//图片切换间隔时间
duration: 500,//每个图片滑动速度,
circular:true,//是否采用衔接滑动
current:3,//初始化时第一个显示的图片 下标值（从0）index
图片更改事件：bindchange='imgchange' imagechange()的e.detail.current为当前显示页面的下标值
wxml:
wxjs:
Page({
data: {
imgUrls: [
'../../img/3.jpg',//图片src
'../../img/6.jpg',
'../../img/5.jpg',
'../../img/4.jpg'
],
autoplay:true,//是否自动播放
autoplaytxt:"停止自动播放",
indicatorDots: true,//指示点
// indicator-color："white",//指示点颜色 暂未启动
// indicator-active-color："red",//当前选中的指示点颜色暂未启动
indicatorDotstxt:"隐藏指示灯",
interval: 1000,//图片切换间隔时间
duration: 500,//每个图片滑动速度,
circular:true,//是否采用衔接滑动
current:3,//初始化时第一个显示的图片 下标值（从0）index
},
autoplaychange:function(event){//停止、播放按钮
if (this.data.autoplaytxt=="停止自动播放") {
this.setData({
autoplaytxt:"开始自动播放",
autoplay:!this.data.autoplay
})
}else{
this.setData({
autoplaytxt:"停止自动播放",
autoplay:!this.data.autoplay
})
};
},
imgchange:function(e){//监听图片改变函数
console.log(e.detail.current)//获取当前显示图片的下标值
}
})
wxss:
.swiper-img{
width: 100%;
height: 500rpx;
}
14.提示框
提交中...
{{tipsContent}}
提交成功
// 提示框参数
hiddenTips: true,
tipsContent: '',
loadingHidden: true,
hiddenCommitTips: true,
hideCommitSuccessToast: true,
// 提示框
onTipsConfirm: function (e) {
this.setData({
hiddenTips: true,
tipsContent: ''
})
},
if (!name) {
this.setData({
hiddenTips: false,
tipsContent: '请填写您的姓名'
})
return;
}
第二种方式：
// 提交成功
this.setData({
loadingHidden: true,
hideCommitSuccessToast: false
})
// 定时，3秒消化
setTimeout(() => {
this.setData({
hideCommitSuccessToast: true
})
}, 3000)
15.数据缓存
onLoad: function () {
var that = this
var brands = wx.getStorageSync('brands');// 从微信缓存中获取数据
if(brands){
// console.log("从微信缓存中获取品牌数据");
that.setData({
brandsMap: brands
})
}else{
// console.log("从接口获取品牌数据");
//获取接口品牌数据
wx.request({
url: userCarUtil.host + userCarUtil.getBrand_second,
success: function (res) {
wx.setStorageSync('brands',res.data);// 将数据放入微信缓存
that.setData({
brandsMap: res.data
})
}
})
}
}