浅谈微信小程序一二

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文件中引用子组件
　　

父组件：
　　class="father">
　　"{{data}}" bind:clickTofather="clickTofather">
　　
　　子组件：
　　class="son">{{data}}
　　"click">
　　
　　son.js：
　　
　　properties: {
　　　　data: {
　　　　　　type: String, //定义数据的类型
　　　　　　value: '' // 定义数据的初始值
　　　　}
　　},
　　methods: {
　　　　click(){
　　　　this.triggerEvent('clickTofather')
　　　　}
　　}

 

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

template模板：
　　

.wxml文件：

　　将模板引用进来："引入文件路径"/>

　　
　　　　
　　　　
　　


　　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