一.小程序基础信息
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,实例,组件,属性,页面 来源： https://www.cnblogs.com/qd-lbxx/p/16665450.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。