浅谈微信小程序一二


1.生命周期
  1.onLoad():页面加载时触发,一个页面只加载一次。
  2.onShow():页面显示切换的时候触发
  3.onReady():页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
  4.onHide():页面卸载时触发
2. 小程序的框架:
  小程序框架有两个层,一是视图层,一是逻辑层。
  框架的视图层:

  1.由 WXML 与 WXSS 编写,由组件来进行展示。
  2.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
  3.WXML(WeiXin Markup language) 用于描述页面的结构。
  4.WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
  5.WXSS(WeiXin Style Sheet) 用于描述页面的样式。
  6.组件(Component)是视图的基本组成单元。


  逻辑层:

  1、小程序开发框架的逻辑层由 JavaScript 编写。
  2、逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
  3、由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
  4、开发者写的所有代码最终将会打包成一份 JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。

  注意:
  1.APP():表示的是注册程序,必须在app.js中注册,且不能注册多个。接收的是object参数,其指定小程序的生命周期函数等。
  2.Page():表示的是注册一个页面,接收的是object参数,其指定页面的初始数据、生命周期函数、事件处理函数。
  3.setData的使用:setData函用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)因此,直接修改this.data但是不调用this.setData()不改变页面的状态,造成数据不一致。this.setData()会触发视图的更新。

3.component组件:
  父子组件传值,需要在父组件的json文件中引用子组件
  

父组件:
  <view class="father">
  <son-compontent data="{{data}}" bind:clickTofather="clickTofather"></son-component>
  </view>
  子组件:
  <view class="son">{{data}}
  <button bindtap="click"></button>
  </view>
  son.js:
  <!--存放组件的属性列表-->
  properties: {
    data: {
      type: String, //定义数据的类型
      value: '' // 定义数据的初始值
    }
  },
  methods: {
    click(){
    this.triggerEvent('clickTofather')
    }
  }



4.template模板的使用:主要是用于展示,方法需要在使用template的页面中定义
  

template模板:
  <template name="example">
    <view> {{msg}}</view>
  </template>
.wxml文件:
  将模板引用进来:
<import src="引入文件路径"/>
  <view>     <!--用is="examplate"表示选择的模板-->     <template is="example" data="{{...str}}"></template>   </view>

  data() {     str: {       index:0,       msg: 'this is a template'     }   }


5.小程序的跳转
  1.wx.navigateTo:当前页面不关闭,跳转的时候是打开新的页面,存在页面栈中,不过这个最多有10层,超10层页面就不跳转了。
  2.wx.navigateBAck:关闭当前页面,返回上一级或多级。delta表示返回的层数,使用方式如下:
  wx.navigateBack({
    delta:1
  })。
  但是,有时候我们想在返回的时候传递参数,我们该怎么办呢?
  当前页面:
  

let pages = getCurrentPages();
  let prevePages = pages[pages.length-2]; 
  //给上一页面进行赋值
  prevePages.setData({
    id:1
  })
  wx.navigateBack({
  delta: 1 // 返回上一级页面。
  }


  返回页面:

onShow(){
    let pages = getCurrentPages()

    let currentPage = pages[pages.length-1]

    if(currentPage.data.id!==undefined) {

      this.setData({
        id: currentPage.data.id
      })
    }
  }

3.wx.redirectTo:关闭当前页面,跳转到新的页面。
4.wx.reLanuch:关闭所有页面,打开新的页面。
5.wx.switchTab:跳转到tabBar页面,并关闭所有非tabBar页面。
总结:除了wx.navigateBack这个api,其他的传参数都可以直接在url后面拼接
 js的构造函数
  构造函数的概念:当任意一个普通函数用于创建一类的对象的时候,就被称作构造函数。约定:构造函数首字母大写。
  ex:

定义一个构造函数:
function People(name, age) {
this.name =name,
this.age = age,
this.introduce = function () {
console.log("我叫"+ this.name)
}
}
声明实例:
var gmn = new People("gmn", 18)
var wrm = new People("wrm", 18) 

这样子,解决了多个实例调用同一个方法的实例的问题,在项目里,我们可能会多次调用同一个方法的时候,我们就可以采用构造函数的方法。这样,可以减少重复的代码。
 class
1.通过关键字class,定义类.类相当于实例的原型,所有在类中定义的方法,都会被实例继承。
ex:

<!--定义类-->
class People{
  constructor(name, age) {
    this.name =name,
    this.age = age
  }
  introduce() {
    console.log("我叫"+ this.name)
  }
}
<!--创建实例-->
var gmn = new People()


2.constructor方法:是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor()方法,如果没有显示定义,默认会添加一个空的constructor方法。

class Examplate {

}
等同于
class Examplate {
  constructor() {}
}

3.不存在变量提升:
  类不存在变量提升,必须先声明类,在调用类。
4.class 的静态方法---static
如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类调用,这就是静态方法。

class Foo {
static classMethod() {
  return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
原文地址:https://www.cnblogs.com/mn6364/p/9651216.html