微信小程序笔记

1、文件的作用

js,wxml,wxss,json

所有页面中要用到的变量，都放在可了pages目录下

wxml：类似于html文件

wxss；类似于css文件（类, id, 标签，子代，后代，before，after）

json: 主要去设置app.json

文件当中，js和wxml必须有，剩下两个可以没有不报错

2、小程序生命周期

软件生命周期(Software Life Cycle,SLC)是软件的产生直到报废或停止使用的生命周期。

一个是App的生命周期

另一个是Page的生命周期

App的生命周期

四个 onlaunch(初始化) ,onShow（显示）, onHide（隐藏） , onerror（报错）

3、以及如何跳转一个新页面

三种

navigateTo

<navigator url="">

rediracte 不能反回上一页

4、如何绑定点击事件

行内写入bindtap=’事件名称’

5.顶部title的设置

{"navigationBarTitleText": "快递查询"}

6、js中的变量在页面中显示出来（this.setData）

首先要在js中的page里去添加这个变量，在页面当中的{{}}的模板中直接添加，改变页面当中的变量的值得时候，需要调用this.setData  一个page内只能有一个data对象，不然后面的data会把前面的data覆盖掉

7、this.用的时候要注意指向问题

this的三个状态

函数，方法，构造函数

1.函数 指向window

2.方法 谁调用指向谁（当前对象）

3.构造函数 谁实例化指向谁

8、小程序使用全局属性

var app=getApp()

子页面可以修改全局属性，并且会影响到其他页面的使用

page外和page内：

通过this.data.name来访问到data中name的属性值；

this.data.name也可以设置 this.data.name的值，但是这个值无法在页面中渲染出来。

this.setData（{name.....}）

变量名前加this，是从page内去找这个变量；没加this是从外去找这个变量；

9、页面传参

search 我们在跳转的路径中加上search格式的数据

在目标也onload方法中用形参接收

11、模块化：高内聚低耦合

App 文件是公共文件；

所有文件大小总共4M；

当前运行的文件不能超过2M。

部分公共的代码放到某个JS文件中；

通过module.exports获取属性。

谁要借要通过，require（path）；

12、小程序wx:if 条件渲染，wx:for循环

在JS文件中如果需要if判断，按我们之前的写法就可以了

在页面（wxml）当中去使用，if判断  标签内部添加  wx:if  wx:elif  wx:else

for循环：JS文件中使用和我们之前是一样的；

在页面（wxml）中循环输出的话，标签内部添加  wx:for子元素用item，索引是index

view标签包裹条件。会在页面中显示出来；

block标签  不会再页面中显示出来

13、wxss文件引用（样式文件）

@import path  公用css样式

14、小程序之模板

有多个相同样式的HTML片段。公用的HTML样式提取出来，放到template 标签中 并且添加name  属性等于xxx

当前页面需要用模板代码的时候，import 标签把模板path添加过来

<import src="../../list/list.wxml"></import>

template  is属性等于xxx

<template is="message" data="{{...obj}}"></template>

当前页面中的数据要添加到模板当中去，模板中直接{{}}输出变量名

在template标签中去添加data属性，等于{{..当前JS中要使用的变量}}

15、小程序的请求

16、form表单中:bindsubmit=”函数”

button标签要设置 formtype=”submit”;

在函数的形参中得到所有，设置的数据；

//app.js

App({

onLaunch: function () {

console.log("App生命周期函数——onLaunch函数");

},

onLoad: function (options) {

// 生命周期函数--监听页面加载

console.log("Page onLoad函数");

},

onReady: function () {

// 生命周期函数--监听页面初次渲染完成

console.log("Page onReady函数");

},

onShow: function () {

// 生命周期函数--监听页面显示

console.log("Page onShow函数");

},

onHide: function () {

// 生命周期函数--监听页面隐藏

console.log("Page onHide函数");

},

onUnload: function () {

// 生命周期函数--监听页面卸载

console.log("Page onUnload函数");

},

globalData: {

userInfo: null

}

})

//logs.js

const util = require('../../utils/util.js')

Page({

data: {//所有的数据都要方法page下面的data对象里面去

logs: []

},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).map(log => {

return util.formatTime(new Date(log))

})

})

}

})

17、搜索功能实现

1）用户在输入框中输入数据，通过input输入，bindinput

获取输入框的value值，将value值存放到data中；

2）点击搜索以input中的关键字去搜索中搜索，选择对应数据；

3）将数据在页面中渲染出来；

4）下拉显示加载更多、或者是加载中；

5）如果没有影响的数据返回，没有找到你想要的数据；

6）下拉显示加载中。。。字样，下拉完成之后，加载中。。。。隐藏。

18、购物车

1）将商品存放到购物车：

点击当前的购物车的时候，把当前数据放到本地储存中去；点击购物车的时候拿到当前盒子中的数据；

（一）、点击购物车图标拿到当前数据的id（把数据中的id绑定给购物车图标）（有全部数据，和某条数据的id(唯一标识））

（二）、循环遍历数组中的id,拿来和我们得到的id去比较，如果相等，就把这条数据提取出来。

（三）、添加到本地储存中去

①　如何避免数据的覆盖

②　添加变量 记录点击的次数

1. 判断当前用户是否有过想买的商品

是：获取本地存储

否：让当前数组为空数组

1. 当前点击的商品，用户是第几次点击

第一次：只让当前商品的times为1，并且追加

多次  ：让当前商品的times+1,不追加

2）拿取购物车商品，读取缓存；

①　判断购物车中是否有数据

如果没有我们给用户提示

有的话直接显示

②　把数据在页面中渲染出来

个数最小为1

点击见得时候

点击加的时候

点击剩余的时候