微信小程序知识点(上)

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

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

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



  
输入的内容:{ {first}} 输入的内容2:{ {second}}
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.如何在超链接添加下划线和删除线:


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路径中获取传递的参数值。


wx.navigateTo{

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

}

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


在页面B接收参数


onload:function(e){
var id = e.getid
}

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


  Jump() {
        
     var str= JSON.stringify(obj);
   wx.navigateTo({
    url: '/pages/list/list?str=' + str,
   })
  }

onload: function(option) {
    var data = JSON.parse(option.str)
   //现在data就是index.js中传过来的数据
}

7.picker默认值设置

需求:

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

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

解决办法:三目运算符



    {
    {typeIndex==null ? "请选择" : types[typeIndex]}}



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

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

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



      



        
          添加投保家属
        

//后台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 拥有动态渲染的能力。

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


 hello world

 hello world 

所有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所示。

微信小程序知识点(上)_第1张图片

图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的默认设置写法


  {
    {title}}

*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.假性获取

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



 

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"
},

23.wx:if

23.1.wx:if使用方法

在框架中,我们用wx:if="{ {condition}}"来判断是否需要渲染该代码块:

 True 

也可以用wx:elifwx:else来添加一个else块: 

 1 
 2 
 3 

因为wx:if是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个标签将多个组件包装起来,并在上边使用wx:if控制属性


   view1 
   view2 

注意:并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

23.2.wx:ifvs hidden

因为wx:if之中的模板也可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。同时wx:if也是惰性的,如果在初始渲染条件为false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。

24.如何在页面js里调用全局js的globalData

如何在其他界面调用app.js里面的数据

使用开发者工具新建一个user页面,然后在user.js的Page()函数前面添加如下代码:


let app = getApp()
console.log('user页面打印的app', app)
console.log('user页面打印的globalData', app.globalData.userInfo)

page({

globalData:{
userInfo:"123"
})

25.关于用户登录后的用户信息存放地点

1.存放在app.js中的全局变量里面

2.使用在缓存里面

26.form表单基本结构

那我们如何才能让标题的内容可以根据用户提交的数据进行修改呢?这就涉及到表单的知识啦。小程序一个完整的数据表单收集通常包含:

  1. form组件

  2. 输入框或选择器组件(比如input组件)

  3. button组件

使用开发者工具在form.wxml里输入以下代码:

       

数据表单涉及到的组件多(至少三个),参数以及参数的类型也比较多,上面有几个非常重要的点,大家可以结合上面的代码来理解:

  • 表单最核心的在于表单组件form,输入框组件input和button组件要在
    内,form也会收集内部组件提交的数据;
  • 绑定事件处理函数的不再是button,而是form,form的bindsubmit与button的 formType="submit"是一对,点击button,就会执行bindsubmit的事件处理函数;
  • input是输入框,用户可以在里面添加信息;name是input组件的名称,与表单数据一起提交。
  • 后台js文件获取form表单提交的组件值为e.detail.value.组件的name值

27.回调函数

那什么是回调函数呢?简单一点说就是:回调Callback是指在另一个函数执行完成之后被调用的函数。success、fail就都是在小程序的API函数执行完成之后,才会被调用,而success和fail它们本身也是函数,也能返回数据。而复杂一点说,就是回调函数本身就是函数,但是它们却被其他函数给调用,而调用函数的函数被称为高阶函数。这些大家只需要粗略了解就可以了。

28.异步与同步

我们前面也提及过异步,那什么会有异步呢?因为JavaScript是单线程的编程语言,就是从上到下、一行一行去执行代码,类似于排队一样一个个处理,第一个不处理完,就不会处理后面的。但是遇到网络请求、I/O操作(比如上面的读取图片信息)以及定时函数(后面会涉及)以及类似于成功反馈的情况,等这些不可预知时间的任务都执行完再处理后面的任务,肯定不行,于是就有了异步处理

把要等待其他函数执行完之后,才能执行的函数(比如读取图片信息)放到回调函数里,先不处理,等图片上传成功之后再来处理,这就是异步。比如wx.showToast()消息提示框,可以放到回调函数里,当API调用成功之后再来显示提示消息。回调函数相当于是异步的一个解决方案。

29.模板

有这样一个应用场景,我们希望所有的页面都有一个相同的底部版权信息,如果是每个页面都重复写这个版权信息就会很繁琐,如果可以定义好代码片段,然后在不同的地方调用就方便了很多,这就是模板的作用。

29.1静态的页面片段

1.比如使用开发者工具在小程序的pages页面新建一个common文件夹,在common里新建一个foot.wxml,并输入以下代码

2.在要引入的页面比如home.wxml的顶部,使用import引入这个模板,

3.然后在要显示的地方调用比如home.wmxl页面代码的最底部来调用这个模板。