微信小程序知识点（上）

1.流式布局中flex-direction:属性要和display:flex搭配使用。

2.如果item过多，要是实现上下拖拽效果，容器选择scroll-view.

3.微信小程序获取input输入框的值

<!--wxml-->
<view class='box'>
  <form bindsubmit='searchBox'>
      <input type='text' class='userBox' name='username'></input>
      <input type='text' class='pwdBox' name='pwd'></input>
      <button class='login' form-type='submit'>登录</button>
  </form>
  <text>输入的内容:{
  {first}}</text>
  <text>输入的内容2:{
  {second}}</text>
</view>
<!--js-->
searchBox:function(e){
    const that = this;
    let first,second;
    that.setData({
      first    :    e.detail.value.username,
      second   :     e.detail.value.pwd
    })
  }
//这个函数一定要写在标签上才能用e.detail.value获取到

4.如何在超链接添加下划线和删除线：

<!--wxss-->
text-decoration:underline; //下划线
text-decoration:line-through;//删除线

5.后台js函数中调用和设置data里面的数据

在调用data的变量时，要使用this.data.xxx，不要忘了这个data。

page({
data:{
test:'this is just test'
},
setup:function(e){
this.setData({//在函数中设置data中的值
test:'变化后的test值'
})
let test1 = this.data.test//获取data中的指定值
}
})

6.如何获取到页面通过url传参传递过来的值

比如从A页面传参跳转到B页面。在B页面的onLoad(options)方法，从url路径中获取传递的参数值。

<!--A.js-->
wx.navigateTo{

url:'../nextPage/nextPage?getid='+getid

}

或者通过wxml的url直接传递参数

<!--A.wxml-->
<navigator url=../nextPage/nextPage?getid={
  {id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

在页面B接收参数

<!--b.js-->
onload:function(e){
var id = e.getid
}

如果需要在页面之间传递对象，就需药在A页面中先使用 JSON.stringify(obj)对需要传递的对象数据进行转换， 然后在最后在B页面的onload方法里，使用JSON.parse(json) 转换为对象类型的数据。

<!--A.js-->
  Jump() {
      <!--obj为需要传递的对象-->  
    　var str= JSON.stringify(obj);
　　　wx.navigateTo({
　　　　url: '/pages/list/list?str=' + str,
　　　})
　　}
<!--B.js-->
onload: function(option) {
   　var data = JSON.parse(option.str)
 　　//现在data就是index.js中传过来的数据
}

7.picker默认值设置

<picker bindchange="bindPickerChange" range="["已婚","未婚","离异"]" value="0">

需求：

默认显示"请选择"，当点击picker后弹出的才是这三个选项，请问这样该如何实现？ 

目前想到的是在range中添加第一项为“请选择”，但这样冗余数据会很多，因为有数个picker，请问这个需求该如何实现？小程序文档中picker已经查看。

解决办法：三目运算符

<!--wxml-->
<picker bindchange="typeChange" value="{
  {typeIndex}}" range="{
  {types}}">
    <view class="picker">{
  {typeIndex==null ? "请选择" : types[typeIndex]}}</view>
</picker>

<!--js-->
Page({
   data: {
      types:["喜欢","一般","讨厌"],
      typeIndex:null
   },
    typeChange(event){
      this.setData({
            typeIndex:event.detail.value
      })
   }
})

8.如何通过checkbox选中状态控制组件的显示与隐藏

通过点击checkbox来切换后台show变量的值，从而控制模块是否进行显示。

<!--前台wxml代码-->
<checkbox-group bindchange="isShow">
      <label for="isShow">
          <view>
              <checkbox id="isShow" value="agree" checked="{
  {}}" /> 是否要给家属投保
          </view>
       </label>
</checkbox-group>

<view wx:if="{
  {show}}">
        <view class="addjiashu">
          <navigator url="../jiashu/jiashu">添加投保家属</navigator>
        </view>
</view>

//后台js代码
page({
data:{
    show:false,
},

isShow:founction(e){
    var sh = this.data.show
    this.setData({
        show:!sh
})
}
})

9.css样式优先级

选择器	权重值
!important标识	10000
行内样式	1000
id选择器	100
类选择器	10
标签选择器	1
通配符 *	0

10.关于position的一些理解

absolute是针对他第一个父元素为相对或者绝对定位的位置来进行定位，如果没有，那么就会相对于body进行定位，如果下拉页面时那么该元素也会跟着页面下拉，而fixed是针对浏览器窗口进行定位，就是手机边框进行定位，下拉页面时不会跟随页面下拉，因此请尽量使用absolute值。

11.json值得范围

JSON的值只能是以下几种数据格式：

• 数字，包含浮点数和整数

• 字符串，需要包裹在双引号中

• Bool值，true 或者 false

• 数组，需要包裹在方括号中 []

• 对象，需要包裹在大括号中 {}

• Nul

另外需要注意的是，小程序的json配置是一种静态的配置文件，且无法在json配置文件中添加注释。

12.WXML一些注意事项

WXML 全称是 WeiXin Markup Language，

在动态绑定中，属性值可以动态的进行绑定，需要注意的是属性值，必须被双引号包裹，且变量名大小写敏感。动态bang通过 { { 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力。

除此外还可以在 { { }} 内进行简单的逻辑运算。 

<!-- 正确的写法 -->
<text data-test="{
  {test}}"> hello world</text>
<!-- 错误的写法  -->
<text data-test={
  {test}}> hello world </text >

所有wxml 标签都支持的属性称之为共同属性，如表2-1所示。

属性名	类型	描述	注解
id	String	组件的唯一标识	整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind*/catch*	EventHandler	组件的事件

13.WXSS一些注意事项

表2-2 小程序WXSS支持的选择器

类型	选择器	样例	样例描述
类选择器	.class	.intro	选择所有拥有 class="intro" 的组件
id选择器	#id	#firstname	选择拥有 id="firstname" 的组件
元素选择器	element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
伪元素选择器	::after	view::after	在 view 组件后边插入内容
伪元素选择器	::before	view::before	在 view 组件前边插入内容

WXSS优先级与CSS类似，权重如图2-13所示。

图2-13 WXSS选择器优先级

权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

小程序的运行环境分成渲染层和逻辑层，第2章提到过 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

14.在scroll-view中实现分页加载

在scroll-view中实现分页加载时，尤其是当页面底部有固定组件时会导致onReachBottom方法无法触发导致无法进行分页加载，这时候推荐使用scroll-view自己的滚动到底部触发的方法，bindscrolltolower，通过绑定该方法，实现scroll-view滚动到底部触发实现分页加载.

15.scroll-view组件使用的注意事项

如果想实现scroll-view的竖式滚动，需要设置scroll-y属性，且需要给scroll-view组件一个固定的height值，否则无法实现组件的滚动

16.组件内容垂直水平居中

通过在组件样式中添加下列代码，实现组件内的内容垂直/水平居中居中：

.list-item{
  display: flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  }

17.wx:key的默认设置写法

<view wx:for-items="{
  {newstitle}}" wx:for-item="title" wx:key="*this">
  {
  {title}}
</view>

*this代表在 for 循环中的 item 本身，而{ {item}}的item是默认的，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

18.关于''和""以及特殊字符。

在实际应用中，总有一些具有特殊含义的字符无法直接输入，比如换行 \n、Tab键 \t、回车 \r、反斜杠 \\，这些我们称之为转义字符。JavaScript中单引号和双引号都表示字符串。如果字符串中存在双引号，建议最外层用单引号；如果字符串中存在单引号，建议最外层用双引号。如何在控制台给打印的字体添加颜色等，大家可以自行去研究。

19.关于变量和赋值。

JavaScript可以使用let语句声明变量，使用等号=可以给变量赋值，等号=左侧为变量名，右侧为给该变量赋的值，变量的值可以是任何数据类型。JavaScript常见的数据类型有：数值（Number）、字符串（String）、布尔值（Boolean）、对象（Object）、数组（array）、函数（Function）等。

在JS中，var用于声明全局变量，let用于声明局部变量，const用于声明常量，在使用时注意区分。

20.<open-data>假性获取

并不是真的获取到了用户的信息，只是假性获取前台显示了一下，不用用户点击授权即可显示用户头像昵称等信息。

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

 

21.微信小程序通过JS动态修改页面标题setNavigationBarTitle

动态设置导航栏标题是一个非常简单的API，在技术文档里面可以了解到，只要给wx.setNavigationBarTitle()的title对象赋值，就能改变小程序页面的标题。

我们可以在页面生命周期函数onload里来调用API，例如在新页面动态设置标题：

  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title:"onLoad触发修改的标题"
    })
  },

22.下拉小程序不出现空白

当我们下拉很多小程序的时候，都会出现一个白色的空白，很影响美观，但是如果我们在windows的配置项里把backgroundColor和navigationBarBackgroundColor的颜色配置成一样，下拉就不会有空白啦，比如：在app.json文件中添加

"window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#1772cb",
  "navigationBarTitleText": "HackWork技术工坊",
  "navigationBarTextStyle":"white",
  "backgroundColor": "#1772cb"
},