微信小程序笔记
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去比较，如果相等，就把这条数据提取出来。
（三）、添加到本地储存中去
① 如何避免数据的覆盖
② 添加变量 记录点击的次数
- 判断当前用户是否有过想买的商品
是：获取本地存储
否：让当前数组为空数组
- 当前点击的商品，用户是第几次点击
第一次：只让当前商品的times为1，并且追加
多次 ：让当前商品的times+1,不追加
2）拿取购物车商品，读取缓存；
① 判断购物车中是否有数据
如果没有我们给用户提示
有的话直接显示
② 把数据在页面中渲染出来
个数最小为1
点击见得时候
点击加的时候
点击剩余的时候
