分类程序开发下的文章 - 梦白沙

分类 "程序开发" 下的文章

小程序slot

app.json

"usingComponents":{

小程序
2022-06-28
评论
650 次浏览

小程序纯数据字段

小程序
2022-06-28
评论
269 次浏览

小程序组件生命周期

<p><span style="color: #ffa54f;">Component</span>(<span style="color: #89ddff;">{</span></p><p>pageLifetimes<span style="color: #89ddff;">:</span> <span style="color: #89ddff;">{</span></p><p>    <span style="color: #ffa54f;">show</span><span style="color: #89ddff;">:</span> <span style="color: #f7e45a;">function</span><span style="color: #89ddff;">()</span> <span style="color: #89ddff;">{</span></p><p><span style="color: #89ddff;">      </span><span style="color: #7ccd7d;">// 页面被展示  初始化数据的时候操作</span></p><p>      <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">_randColor</span>()</p><p>    <span style="color: #89ddff;">},</span></p><p>    <span style="color: #ffa54f;">hide</span><span style="color: #89ddff;">:</span> <span style="color: #f7e45a;">function</span><span style="color: #89ddff;">()</span> <span style="color: #89ddff;">{</span></p><p><span style="color: #89ddff;">      </span><span style="color: #7ccd7d;">// 页面被隐藏</span></p><p>    <span style="color: #89ddff;">},</span></p><p>    <span style="color: #ffa54f;">resize</span><span style="color: #89ddff;">:</span> <span style="color: #f7e45a;">function</span><span style="color: #89ddff;">(</span><span style="color: #fa8072;">size</span><span style="color: #89ddff;">)</span> <span style="color: #89ddff;">{</span></p><p><span style="color: #89ddff;">      </span><span style="color: #7ccd7d;">// 页面尺寸变化</span></p><p>    <span style="color: #89ddff;">}</span></p><p>  <span style="color: #89ddff;">},</span></p><p>  lifetimes<span style="color: #89ddff;">:</span> <span style="color: #89ddff;">{</span></p><p>    <span style="color: #ffa54f;">attached</span><span style="color: #89ddff;">:</span> <span style="color: #f7e45a;">function</span> <span style="color: #89ddff;">()</span> <span style="color: #89ddff;">{</span></p><p>      <span style="color: #89ddff;">try</span> <span style="color: #89ddff;">{</span></p><p><span style="color: #89ddff;">       </span><span style="color: #7ccd7d;">// 需要在初始化的时候做的操作</span></p><p>      <span style="color: #89ddff;">}</span> <span style="color: #89ddff;">catch</span> (<span style="color: #c0c0c0;">e</span>) <span style="color: #89ddff;">{</span></p><p>      <span style="color: #89ddff;">}</span></p><p>      <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">_randColor</span>()</p><p><span style="color: #89ddff;">      </span><span style="color: #7ccd7d;">// 在组件实例进入页面节点树时执行</span></p><p>    <span style="color: #89ddff;">},</span></p><p>    <span style="color: #ffa54f;">detached</span><span style="color: #89ddff;">:</span> <span style="color: #f7e45a;">function</span> <span style="color: #89ddff;">()</span> <span style="color: #89ddff;">{</span></p><p><span style="color: #89ddff;">      </span><span style="color: #7ccd7d;">// 在组件实例被从页面节点树移除时执行</span></p><p>    <span style="color: #89ddff;">},</span></p><p>  <span style="color: #89ddff;">}</span></p><p>}</p><p>pageLifetimes在每次页面载入时都会执行</p>

小程序
2022-06-28
评论
330 次浏览

小程序组件监听

<p><span style="color: #ffa54f;">Component</span>(<span style="color: #89ddff;">{</span></p><p>data<span style="color: #89ddff;">:</span> <span style="color: #89ddff;">{</span></p><p>      rgb<span style="color: #89ddff;">:{</span></p><p>        r<span style="color: #89ddff;">:</span><span style="color: #fa8072;">0</span><span style="color: #89ddff;">,</span>g<span style="color: rgb(137, 221, 255);">:</span><span style="color: rgb(250, 128, 114);">0</span><span style="color: rgb(137, 221, 255);">,</span>b<span style="color: rgb(137, 221, 255);">:</span><span style="color: rgb(250, 128, 114);">0</span></p><p>      <span style="color: #89ddff;">},</span></p><p>      fullcolor<span style="color: #89ddff;">:</span><span style="color: #89ddff;">'</span><span style="color: #fa8072;">0,0,0</span><span style="color: #89ddff;">'</span></p><p>  <span style="color: #89ddff;">},</span></p><p> observers<span style="color: #89ddff;">:{</span></p><p>    <span style="color: #89ddff;">'</span><span style="color: #fa8072;">rgb.r,rgb.g,rgb.b</span><span style="color: #89ddff;">'</span><span style="color: #89ddff;">:</span><span style="color: #f7e45a;">function</span><span style="color: #89ddff;">(</span><span style="color: #fa8072;">r</span><span style="color: #89ddff;">,</span><span style="color: #fa8072;">g</span><span style="color: #89ddff;">,</span><span style="color: #fa8072;">b</span><span style="color: #89ddff;">)</span></p><p>    <span style="color: #89ddff;">{</span></p><p>      <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">setData</span>(<span style="color: #89ddff;">{</span>fullcolor<span style="color: #89ddff;">:</span><span style="color: #89ddff;">`${</span><span style="color: #c0c0c0;">r</span><span style="color: #89ddff;">}</span><span style="color: #fa8072;">,</span><span style="color: #89ddff;">${</span><span style="color: #c0c0c0;">g</span><span style="color: #89ddff;">}</span><span style="color: #fa8072;">,</span><span style="color: #89ddff;">${</span><span style="color: #c0c0c0;">b</span><span style="color: #89ddff;">}`</span><span style="color: #89ddff;">}</span>)</p><p>    <span style="color: #89ddff;">},</span></p><p><span style="color: #89ddff;"><br/></span></p><p>    <span style="color: #89ddff;">'</span><span style="color: #fa8072;">rgb.**</span><span style="color: #89ddff;">'</span><span style="color: #89ddff;">:</span><span style="color: #f7e45a;">function</span><span style="color: #89ddff;">(</span><span style="color: #fa8072;">obj</span><span style="color: #89ddff;">)</span></p><p>    <span style="color: #89ddff;">{</span></p><p>      <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">setData</span>(<span style="color: #89ddff;">{</span>fullcolor<span style="color: #89ddff;">:</span><span style="color: #89ddff;">`${</span><span style="color: #c0c0c0;">obj</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">r</span><span style="color: #89ddff;">}</span><span style="color: #fa8072;">,</span><span style="color: #89ddff;">${</span><span style="color: #c0c0c0;">obj</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">g</span><span style="color: #89ddff;">}</span><span style="color: #fa8072;">,</span><span style="color: #89ddff;">${</span><span style="color: #c0c0c0;">obj</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">b</span><span style="color: #89ddff;">}`</span><span style="color: #89ddff;">}</span>)      </p><p>    <span style="color: #89ddff;">}</span></p><p>  <span style="color: rgb(137, 221, 255);">}</span></p><p><span style="color: rgb(137, 221, 255);">}</span></p>

小程序
2022-06-28
评论
352 次浏览

小程序组件

app.json (全局)

"usingComponents":{

"tst":"/componets/tst/tst"

}

小程序
2022-06-28
评论
315 次浏览