WeChat---小程序知识点总结_小程序wxss样式表中规定的样式根据其作用范围分为两类:全局样式和局部样式。

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的软件，
来管理企业经营活动，且无需对软件进行维护，服务提供商会全权管理和维护软件。