小程序的技术总结

记录自己学习

小程序的使用

1.0 基础语法的使用
html,css js 对应 wxml, wxss, wxs/ js 当然还有必不可少的json;

---

JSON:
我们可以看到在项目的根目录有一个 app.json 和 project.config.jsonsetmap.json，
此外在 每个生成Pages中还有个json文件
app.json 是当前小程序的全局配置，
包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
详见全局配置: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

页面配置:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

wxml:
就是小程序中的html, 只是这里的html标签变成了组件, 使用方式大部分还是相同的;
数据绑定使用 Mustache 语法（双大括号）将变量包起来,(最好可以使用已有只是来进行类比, 例如Vue)

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

这里的mustache语法; 可以插在组件中, 也可以在两个<></>中;
常用的逻辑指令 有 wx:if ,hidden,wx:elif , wx:else ,wx:for (wx:key ,保证数据的顺序默认item为遍历值, index为索引,
可以使用 wx:for-item , wx:for-index 来进行改名字)还值得一提的对于多个节点, 可以使用block 来进行包裹

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

当然对于组件化,开发
wxml 还可以进行 模板的定制

定义一个模板: 使用name来进行标记, 使用的时候使用is进行确定(也支持mustache语法),data 来传递数据

<template is="temp" data="{{...item}}"/>

如果在其他的页面进行引用, 需要先使用import 或者 include 引入,
但是没法嵌套使用,
include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置

<import src="temp.wxml"/>  

include 直接使用,整个

<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

wxss:
与css基本差不多,
但是支持的选择器比较少:

wxs/js:
每个 wxs 模块均有一个内置的 module 对象。

---

自定义组件(重点)
页面跳转时候的数据传递, 其实这跟Vue中页面几乎也是差不多的,

需要传递, 或者暴露的数据放在properites 中,

behaveiors 就混入一样, 可以在其他页面来进行, 数据的整合,

---

小程序支持在组件上直接改变样式,但是内层样式时无法改变的;
组件中设置properties 中设置的值就就是 为data 中的值;

---

生命周期

app, page , component

page的生命周期图

this

箭头函数函数的this是不确定的会一层一层的向上找,
如果不是用箭头函数, 则需要万分注意 , 此时需要在之前声明 改变this的,进行重新赋值

在window上最后的就是指向window这个对象

生命周期:

各种情景下的启动情况