微信小程序开发学习笔记

目录：

1. 获取微信小程序的场景值，例如用户是通过搜索进入的还是扫二维码
2. 微信小程序延时执行,定时执行的setTimeout方法
3. 微信小程序 JS动态修改样式的实现方法
4. 微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
5. 微信小程序 wx:if 多条件判断
6. 微信小程序如何使用setData修改data中子对象的属性值
7. 如何让view如何充满整个屏幕
8. 如何让文本和图片对齐
9. 微信小程序向原数组添加数组
10. 微信小程序返回上一级关闭当前页面
11. 微信小程序去除button边框
12. 微信小程序引入全局或公共样式
13. 微信小程序如何把接口调用成功的回调函数返回的参数return出去
14. 微信小程序scroll-view隐藏滚动条方法
15. 微信小程序 跳转navigateTo传递对象
16. 微信小程序scroll-view组件自适应不同高度的手机
17. 微信小程序文字超过行后隐藏并且显示省略号
18. 微信小程序文本实现两端对齐
19. 微信小程序如何让text内容空格
20. 如何让view固定在屏幕顶部/底部，不随屏幕滚动而滚动
21. 如何使用rich-text 显示富文本
22. 微信小程序动态修改页面标题setNavigationBarTitle
23. 解决小程序富文本解析wxParse 手机显示不出来

---

1.获取微信小程序的场景值

//在app.js中
onLaunch: function(options) {
    console.log(options.scene) 
  },
onShow: function(options) {
    console.log(options.scene)
  }

场景值详见：点这里

2.微信小程序延时执行,定时执行的setTimeout方法

setTimeout(function () {
     //要延时执行的代码
}, 1000) //延迟时间 这里是1秒

3.微信小程序 JS动态修改样式的实现方法

wxml:

<view >
 <view class="cont" style="background:{{background}};color:{{color}}">属性改变</view>
 <button bindtap="tryDriver">测试</button>
</view>

js:

Page({
 data: {},
 tryDriver: function() {
	 this.setData({
		  background: "#89dcf8",
		  color:'#ffffff'
	 })
 }
})

4.微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

顶端固定：

<view  style="position:fixed; top:0;width: 750rpx;">
    ......
</view>

底端固定：

<view  style="position:fixed; bottom:0;width: 750rpx;">
    ......     
</view>

5.微信小程序 wx:if 多条件判断

<view wx:if="{{a}}">单个条件</view>
<view wx:if="{{a || b}}">多个或条件</view>
<view wx:if="{{a && b}}">多个且条件</view>

wx:if else 的判断:

<view wx:if="{{a>5}}">6</view>
<view wx:elif="{{a < 5}}">4</view>
<view wx:else">5</view>

6.微信小程序如何使用setData修改data中子对象的属性值

xxfunction:function(e){
    this.setData({
      'person.name': 'xxx'
    })
  },

7.如何让view如何充满整个屏幕

wxss样式代码
.xxx_class{
  position: fixed;
  height: 100%;
  width: 100%;
}

8.如何让文本和图片对齐

如果文本与图片没有对齐，可以尝试设置给图片与文本都设置vertical-align: middle;

9.微信小程序向原数组添加数组

this.setData({
   list: this.data.list.concat(newarray)
})

10.微信小程序返回上一级关闭当前页面

wx.navigateBack({
  delta: 1
})

11.微信小程序去除button边框

button::after {
  border: none
}

12.微信小程序引入全局或公共样式

在app.wxss中引入wxss布局文件，这样在所有页面直接用class名就可以了，如果是在某个页面的wxss中引入布局文件，那么只有该页面可使用公共样式。

@import "page/common/hotrecommend.wxss";

13.微信小程序如何把接口调用成功的回调函数返回的参数return出去

util.js:

function apifunction() {
    return new Promise(function(resolve){
       wx.request({
		    url: url,
		    data: {},
		    success: (res) => {
		       resolve(res);//返回结果
		    },
		    fail: (res) => {}
		})
   });
}

xxx.js:

var util= require('../utils.js');
 
onLoad: function (options) {
    util.apifunction().then(function(returnData){
        console.log(returnData);//打印出返回的数据
    })
}

14.微信小程序scroll-view隐藏滚动条方法

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

15.微信小程序 跳转navigateTo传递对象

先将对象转换为json字符串然后到下个页面将json字符串，再转化为对象

let str=JSON.stringify(e.currentTarget.dataset.item);
wx.navigateTo({
	url: '../page/pageDetail/pageDetail?jsonStr='+str
})

onLoad:function(options){
    let object=JSON.parse(options.jsonStr);
    this.setData({detail:object});
 },

16.微信小程序scroll-view组件自适应不同高度的手机

//计算scroll-view的高度
function calculateHeight(id, that) {
  return new Promise(function (resolve) {
    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
    let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
    let query = wx.createSelectorQuery().in(that);// 创建一个SelectorQuery对象实例
    query.select(id).boundingClientRect();//id是"#xxx",除了滚动屏之外的其他元素
    var scrollViewHeight = 0;
    query.exec((res) => {
      let xxHeight = res[0].height;//scroll-view外其他视图的高度
      scrollViewHeight = (windowHeight - xxHeight) * 750 / windowWidth;/**计算rpx值*/
      resolve(scrollViewHeight);//返回高度
    });
  });
}

17.微信小程序文字超过行后隐藏并且显示省略号

方法一：

overflow:hidden;//超出一行文字自动隐藏 

text-overflow:ellipsis;//文字隐藏后添加省略号

white-space:nowrap;//强制不换行

方法二：
上面的css只能保证单行显示隐藏，如果你想要2，3，n行隐藏

display: -webkit-box;overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

18.微信小程序文本实现两端对齐

text-align-last: justify;

效果图：

19.微信小程序如何让text内容空格

<text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>

20.如何让view固定在屏幕顶部/底部，不随屏幕滚动而滚动

    position:fixed;
    top:0;//如果是底部：bottom:0

21.如何使用rich-text 显示富文本

后端传回来的html文本需要进行转义

  //小程序里的转义方法
  escape2Html: function (str) {
    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
  },

//将html文本转义
let content= this.escape2Html(html)

//wxml文件中，content自定义的变量名，即data{content:"//字符串}，虽然官网是不推荐使用字符串的
<rich-text nodes="{{content}}"></rich-text>

22.动态修改页面标题setNavigationBarTitle

原先是这么设置的：在xxx.json中

 {
  "navigationBarTitleText": "注册"
  }

但是有时候需要依据不同的情况来设置：

 wx.setNavigationBarTitle({
        title: '注册'
 })

23.解决小程序富文本解析wxParse 手机显示不出来

html2json.js文件的console.dir 改成console.log就可以显示了,有的手机不支持console.dir

===========================================================================
注：这些都是平时解决问题时收集的知识点，出处太多不太记得，这里表示感谢！撒花❀