1.全局样式与局部样式
- 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
- 在 pages中组件 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
2.小程序的单位:rpx
小程序支持的单位？
可以说小程序就是在微信体系网页的另一种表现方式。网页中的单位小程序基本都支持。但实际开发中，常用到的是以下几种 ↓
rpx
rpx做为小程序自家系统里的单位，特性是可以根据屏幕宽度进行自适应。rpx官方介绍
比如写一个2:1比例的全屏轮播图，可以这样写：
swiper {width:750rpx;height:375rpx;
}
1rpx = 0.5px = 1物理像素。
网页开发中，默认字体一般设置为14px，在小程序中我们就可以设置小程序的默认字体大小为28rpx。
px
在小程序开发中 rpx基本就代替了px，但在一些特殊的场合，px的表现要比rpx好。
兼容ipad时，由于ipad可以横屏和竖屏，并且屏幕宽度可以达到2K以上，如果你的小程序要考虑到兼容ipad，那么还是多考虑使用px吧。
em与rem
em与rem在H5的网页开发上可以大放异彩，但小程序中因为有rpx的存在，em与rem使用的就少了。基本只有在一些对字体宽度有特效的情况下才会使用。比如首行缩进。
vw、vh和百分比
vw：视窗宽度，1vw等于视窗宽度的1%。
vh：视窗高度，1vh等于视窗高度的1%。
%：父级容器的宽度百分百。
calc() 的使用
前面讲了单位，那么我们现在来聊聊怎么使用这些单位了。小程序是网页的一种，支持css，也支持calc()。
calc() 函数用于动态计算长度值。
● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；● 任何长度值都可以使用calc()函数进行计算；● calc()函数支持 "+", "-", "*", "/" 运算；● calc()函数使用标准的数学运算优先级规则；
使用场景示例
垂直导航页，常用于外卖订餐或者商城的二级分类页。
上半部分是定死高度375rpx的轮播图区域，下半部分是可以随设备高度变化的可滚动的区域。容器高度可以这样写：
{height:calc(100vh - 375rpx)
}3.setData()方法的使用和注意事项(包含获取data)
Page.prototype.setData(Object data, Function callback)1. setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
2.Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。
其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。下面设置data中的text和genre_index的值
this.setData({'state.genre_index':1,text:'data value'
})
2、获取data数据
获取data中的text和genre_index值需要使用this
var gener_index=this.data.state.genre_index
var text=this.data.text
3、调用viewTap函数
在viewTap函数中调用内部的ball函数可以直接调用，如果需要在onReady函数中调用viewTap函数需要使用this。
onReady: function () {this.drawBall()},注意：
1 直接修改this.data，而不调用this.setData()，是无法改变当前页面的状态的，会导致数据不一致
2 仅支持可以JSON化的数据 | JSON.stringify() JSON.parse()
3 单次设置的数据不能超过1024KB，尽量避免一次设置过多的数据
4 不要把data中的任何一项的value设为undefined，否则这一项将不能被设置，可能会有潜在的问题-
直接在wx:request()的success回调函数中使用this.setData()会报这样一个错误：
原因:这里的this是相对于wx:request()的当前对象;
解决方案:应为这里的wx:request()实在页面加载的时候调用的,所以我们可以在onload()中定义一个that,将this赋值给that,那么此时that就等价于onload()的当前对象,之后就可以在success中直接用 that.setData()即可设置传来的数据!!!
以下是本人准备学习的，暂时链接到官方文档，之后添加个人实例代码及相应问题！！！
3.数据绑定 ({{变量名}})
4.列表渲染({{wx:for="{{数组名}}"}})
5.条件渲染({{wx:if|wx:elif|wx:else="{{变量名}}"}})
6.模板(template)
7.引用(require|import|@import)
8.小程序之 input框设置placeholder的style
<input placeholder='{{capitaltext}}' placeholder-class="center" placeholder-style='color:rgb(207,207,207);font-size:26rpx;' type='number' maxlength='4'></input>在 wxss中 用类名改变 placeholder样式即可9.微信小程序点击软键盘搜索按钮（confirm-type="search"）之后的取值
<input name="search" type='text' placeholder='项目编号搜索...' placeholder-class='center' confirm-type="search" bindconfirm="bindconfirm" focus='{{focus}}' bindinput='bindinput' ></input>.js/.wxs
Page({/*** 页面的初始数据*/data: {tab1: true,tab2: false,searchBtn: true,isLoading:false,focus:false},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {this.loading =true;},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {this.focus = true;this.isLoading = false;},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {},// 点击键盘上的搜索bindconfirm:function(e){var that=this;var discountName=e.detail.value['search - input'] ?e.detail.value['search - input'] : e.detail.value console.log('e.detail.value', discountName)},bindinput:function(res){console.log('bindinput:',res)}
})
10.页面路由（navigateTo, redirectTo,switchTab）
11.公共的代码抽离---模块化（全局定义方法，暴露模块）
12.坑之一:
input 输入框获得焦点会上推页面，导航栏也会被上推，而右上角的胶囊不会被上推。
解决方法input 标签adjust-position 设置为false，如果是固定在顶部的输入框，还需要对固定元素重新定位避免输入框被遮挡，这个时候需要获取弹出键盘高度，需要监听input 输入框的focus 和 blur 事件，使用bindfocus，返回对象e.detail.height就是键盘高度，注意这个参数只有在真机中才有，模拟器中并没有。
13.坑子二:
font-weight属性有时不起作用:即不会加粗字体
本人解决方案:font-family:'Arial';font-weight:blod;
14.微信小程序中开启下拉刷新：
微信小程序中想开启下拉刷新，却发现只有刷新动作却看不到刷新的样式原因：
15.动态改变导航栏文本内容
setNavigationBarTitle
wx.setNavigationBarTitle({title: '当前页面'
})title string 是 页面标题
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
16.对于全局使用的字段或关键字，存放位置
一般推荐存放在全局app.js的globalData中，可以在页面加载的第一时间拿到对应的字段或关键字；缓存就是类似数据库，全局变量就是所有页面都能用，这是两个东西，
比如说新闻应用，首页的数据需要放到缓存里，然后下次访问首页的时候直接加载缓存的数据，
然后在异步调用接口刷新数据，这样在进入首页的时候就不需要loading了，
直接能看到数据，感觉就是秒开，用户体验更好一些，全局变量就是类似用户登录信息，
登录之后设置成全局的，每个页面都可以使用，不然跳转后就需要每次都重新获取用户信息简单总结，即像用户信息或者所有页面都会经常用的字段存在全局；
像某页面的数据则存放在缓存中，以待下次更快速的加载页面，感觉上页面加载更加迅速。17.当小程序中音乐播放完毕后,音乐状态未恢复
在onLoad中调用
wx.onBackgroundAudioStop(function() { // 全局事件 监听对应列表中的音乐停止事件app.globalData.g_currentMusicId = null;app.globalData.g_isPlaying = false; // 改变全局播放状态that.setData({music_flag: false})})18.this.data 与 this.setData 区别
this.data与this.setData的关系就是this.setData里面存储的是this.data的副本，而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面，因为这个时候的this.setData里面的副本还是没有更新前的。this.setData({})用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。用this.data而不用this.setData({})会造成页面内容不更新的问题。19.image的mode属性值
mode 的合法值值 说明 最低版本
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
top 裁剪模式，不缩放图片，只显示图片的顶部区域
bottom 裁剪模式，不缩放图片，只显示图片的底部区域
center 裁剪模式，不缩放图片，只显示图片的中间区域
left 裁剪模式，不缩放图片，只显示图片的左边区域
right 裁剪模式，不缩放图片，只显示图片的右边区域
top left 裁剪模式，不缩放图片，只显示图片的左上边区域
top right 裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left 裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right 裁剪模式，不缩放图片，只显示图片的右下边区域 20.在新页面查看大图
wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。wx.previewImage({current: '', // 当前显示图片的http链接urls: [] // 需要预览的图片http链接列表
})属性 类型 默认值 必填 说明
urls Array.<string> 是 需要预览的图片链接列表。2.2.3 起支持云文件ID。
current string urls 的第一张 否 当前显示图片的链接
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
21.小程序中json文件里的坑
1. 里面不能有注释，若要，用{} 包着
2. 里面对象或数组最后不能有多余的逗号（,）如果后面没配置的话22. 设置以及获取剪切板的信息
wx.setClipboardData(Object object) 设置剪切板内容
wx.getClipboardData() 获取剪切板内容
属性 类型 必填 说明
data string 是 剪贴板的内容
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
示例代码wx.setClipboardData({data: 'data',success (res) {wx.getClipboardData({success (res) {console.log(res.data) // data}})}
})23. 小程序中绑定事件说明
bindtap:事件绑定不会阻止冒泡事件向上冒泡，catchtap :事件绑定可以阻止冒泡事件向上冒泡
24.小程序中ios上遇到的问题
当日期格式化是 yyyy-mm-dd 时会报错，改为 yyyy/mm/dd即可；
即日期个事分割线做兼容：- 改为 / 即可兼容！
25.小程序中style中绑定动态样式
<view class="tab-header"><view style="background:{{homeOutObj.color}};width:{{20}}%" >出租</view><view style="background:{{homeInObj.color}};width:{{50}}%" >求租</view>
</view>26. 小程序中的请求方式不同header配置的异同
1. 属性method为get方法时，header必须为（默认header就是这个）：
header: { 'content-type': 'application/json' },
2. method为post时，header必须为（POST 请求会将data的值放在Request Payload里面，
而不是Query String Parameters里面，后端服务器如果不注意，就无法取到数据。）：
header: { 'content-type': 'application/x-www-form-urlencoded' },
如果header配置错误会导致后台得不到数据而报NullPointerException错误。
SaaS是什么?
简单说IT做的针对企业内部使用的相关系统。
企业只用关心如何使用，相关的维护来由我们IT来管理的系统软件~
SaaS是Software-as-a-Service（软件即服务）的简称，是云计算服务的一种。
它是一种通过Internet提供软件的模式，用户不用再购买软件，而改用向提供商租用基于Web的软件，
来管理企业经营活动，且无需对软件进行维护，服务提供商会全权管理和维护软件。