一.小程序基础信息
uniapp 和 taro 都可以开发小程序 并且 可以开发ios Android
原生开发APP : ReactNative 和 Flutter
小程序是双线程模型 :
WXML模块和WXSS样式运行于渲染层
JS脚本运行于 逻辑层注册账户申请APPID : 地址
微信开发者工具 : 地址
vscode相关小程序的三个插件 :
WXML - Language Service
小程序开发助手
wechat-snippet
二.小程序配置文件信息
1.project.config.json 和 project.private.config.json 项目配置文件 : 项目名称、appid等
A: pages - 页面路径列表
B: window - 全局的默认窗口展示
C: tabBar - 顶部tab栏的展示
4.page.json: 页面的配置文件 配置在page.json的会覆盖app.json的 5.全局的app.js文件 通常在app.js文件中,会有3种需求 : 1.判断小程序进入的场景 : 在onLaunch和onShow生命周期回调函数中，会有options参数，其中有scene值 2.监听生命周期函数 3.全局共享的数据 : [ 代码实例 ] 通过 getApp( ) 可以获取app.js文件的数据 6.页面的app.js文件 page函数 , 通常会做以下4件事 1.在生命周期函数中发送网络请求，从服务器获取数据； 2.初始化一些数据，以方便被wxml引用展示； 3.监听wxml中的事件，绑定对应的事件函数； 4.其他一些监听（比如页面滚动、上拉刷新、下拉加载更多等） [ 4个的代码实例 ]
三.小程序的内置组件
1.Text文本组件
text是行内元素
2个属性 :
user-select 属性决定文本内容是否可以让用户选中
decode 属性是否解码
2.Button按钮组件
button 是块级元素
主要的是 open-type 属性 : 可以让用户获取一些特殊性的权限，可以绑定一些特殊的事件
3.View视图组件
view是块级元素
4.Image图片组件
常用的一个属性 : mode = widthFix
注意：image组件默认宽度320px、高度240px
wx.chooseMedia : 获取本地手机相册的图片
5.ScrollView滚动组件
实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了） 垂直方向滚动必须设置scroll-view一个高度6.组件的共同属性
补充 : mark 属性 也是可以传递给事件的,也是通过event获取到的
四.小程序语法
1.样式
行内样式 > 页面样式 > 全局样式 [ 代码实例 ]2.mustache语法 - {{ }}
跟vue一样,不多说了
3.条件渲染
wx:if - wx:elif - wx:else
hidden 类似 v-show
4.列表渲染
wx:for
变量名 固定的 : item
索引值 固定的 : index
wx:key 取的是每个item的某个属性
重新命名变量名 : wx:for-item="book"
重新命名索引值 : wx:for-index="i"
mustache语法 和 条件渲染 和 列表渲染 的 [ 代码实例 ]
5.wxs语法基本使用 -- 类似于过滤器
创建一个.wxs结尾的文件 , 改文件只能用es5语法,并且只能用common JS 导出
使用 : 引入 并通过module命名
<wxs module="format" src="/utils/format.wxs"></wxs>
五.小程序事件处理
通过 bind / catch[ 会阻止事件向上冒泡 ] 来绑定事件
capture-bind:tap 这个就是捕获事件常见的事件 :
input : bindinput , bindblur , bindfocus
scroll-view : bindscrolltowpper , bindscrolltolower
bindtap
详细的事件 : 地址
事件对象 event
currentTarget 和 target 的区别 : target : 是触发事件的组件 currentTarget : 是处理事件的组件
事件参数的传递 : 通过 data-属性
获取参数 : e.currentTarget.dataset.属性
六.小程序组件化
自定义组件 : 创建component组件
自定义组件的步骤 :
1.首先需要在 json 文件中进行自定义组件声明（将component 字段设为 true 可这一组文件设为自定义组件）
2.在wxml中编写属于我们组件自己的模板
3.在wxss中编写属于我们组件自己的相关样式
4.在js文件中, 可以定义数据或组件内部的相关逻辑 5.引入自定义组件 : 在app.json 的 usingComponents 引入 如果在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件 细节 : 1.组件内不能使用id选择器、属性选择器、标签选择器 2.外部使用了标签选择器，会对组件内产生影响 3.如何让组件和外部组件相互影响 : 在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性 styleIsolation有三个取值： isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认取值) apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置 了
向组件传递数据 : 通过 properties 来接受 [ 代码实例 ]
向组件传递样式 : 通过 externalClasses 来接受 [ 代码实例 ]
自定义事件 : 通过 this.triggerEvent 发出事件 [ 代码实例 ]
页面父组件可以调用 this.selectComponent ，获取子组件的实例对象 [ 代码例子 ]
七.插槽 slot
普通插槽 [ 代码实例 ] 跟vue一样 默认值通过css来写 [ 代码实例 ]
具名插槽 [ 代码实例 ]
具名插槽需要再 js 的 options 对象 添加 multipleSlots 为 true
使用 : slot='xxx'
八.behaviors 类似 mixins [ 代码实例 ]
写一个js ,然后通过 : behaviors 来引入
九.生命周期
组件的生命周期 lifetimes 里面的5个生命周期
created : 在组件实例刚刚被创建时执行
attached : 在组件实例进入页面节点树时执行
ready : 在组件在视图层布局完成后执行
moved : 在组件实例被移动到节点树另一个位置时执行
detached : 在组件实例被页面节点树移除时执行
组件所在页面的生命周期 pageLifetimes 里面的3个生命周期
show : 组件所在的页面被展示时执行
hide : 组件所在的页面被隐藏时执行
resize : 组件所在的页面尺寸变化时执行
十.API
标签：原生,自定义,程序,json,实例,组件,属性,页面 From： https://www.cnblogs.com/qd-lbxx/p/16665450.html