分享

1. 模板封裝

2. 組件封裝(組件化)

3. 骨架屏

4. 小程序seo處理

5. 對于在iphone系列下安全區(qū)踩的坑以及處理方式

6. 百度小程序與微信小程序區(qū)別

7. 使用微信的picker

8. 表單輸入后清空處理

請教

• 頁面A -> 頁面B，頁面B的操作觸發(fā)了頁面A的數據更新。返回-更新頁面A的數據

  處理方法

  1. 在頁面A監(jiān)聽onShow事件，在onShow事件觸發(fā)時無腦更新頁面數據。

  2. 通過EventBus來實現跨頁面通信

1. 小程序template模板與component組件的區(qū)別和使用

• 前言

  程序的編寫過程中，我們不難發(fā)現有很多雷同或者相同的代碼，此時為了減輕我們的工作量，便可以通過建立“模板”來避免代碼冗余的情況，因為在模板中定義代碼片段，然后在不同的地方調用！

  這也就是"組件化"的存在性,也是趨勢

• 二者區(qū)別

  template主要是展示，方法則需要在調用的頁面中定義。(商品列表是渲染使用template----百度小程序)

  而component組件則有自己的業(yè)務邏輯，可以看做一個獨立的page頁面。(地區(qū)選擇,公共的地區(qū)選擇----小程序管理后臺;百度小程序底部tab選項卡)

• template模板

  • 模板創(chuàng)建

    建議在templates目錄下再創(chuàng)建子目錄，存放單獨的模板

    [圖片上傳失敗...(image-be518-1565939423532)]

    [圖片上傳失敗...(image-ad5862-1565939423532)]

  • 模板文件

    template.wxml文件中能寫多個模板，用name區(qū)分

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n53" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: inherit; position: relative !important; width: inherit;"><template name="demo">
    <view class='tempDemo'>
    <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text>
    <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text>
    </view>
    </template></pre>

  • 樣式文件

    模板擁有自己的樣式文件（用戶自定義）

  • 頁面引用

    xxx.wxml

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n60" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: inherit; position: relative !important; width: inherit;">
    <import src="../../templates/demo/index.wxml" />
    
    <view>
    <text>嵌入模板</text>
    <template is="demo" data="{{...staffA}}"></template>
    <template is="demo1" data="{{...staffB}}"></template>
    </view></pre>

    xxx.css引入模板樣式表

  • 備注

    1. 一個模板文件中可以有多個template,每個template均需定義name進行區(qū)分，頁面調用的時候也是以name指向對應的template;

    2. template模板沒有配置文件(.json)和業(yè)務邏輯文件（.js）,所以template模板中的變量引用和業(yè)務邏輯事件都需要在引用頁面的js文件中進行定義；

• Component組件

  • 組件編寫

    component組件由4個文件構成，與page類似，但是js文件和json文件與頁面不同。

    .js文件

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n76" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: inherit; position: relative !important; width: inherit;">Component({
    /**

    • 組件的屬性列表
      /
      properties: {
      name: {
      type: String,
      value: ''
      }
      },
      ?
      /*
    • 組件的初始數據
      /
      data: {
      type: "組件"
      },
      ?
      /*
    • 組件的方法列表
      */
      methods: {
      click: function () {
      console.log("component!");
      }
      }
      })</pre>

    .json 文件

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n78" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: inherit; position: relative !important; width: inherit;">{
    "component": true,
    "usingComponents": {}
    }</pre>

  • 組件引用

    頁面中引用組件需要在json配置文件中進行配置

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n82" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: inherit; position: relative !important; width: inherit;"> {
    "navigationBarTitleText": "模板demo",
    "usingComponents": {
    "demo": "../../components/demo/index"
    }
    }</pre>

    然后在模板文件中進行使用就可以了，其中name的值為json配置文件中usingComponents的鍵值：

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n84" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: inherit; position: relative !important; width: inherit;"> <demo name="comp" /> </pre>

  • 備注

    組件中不會自動引用公共樣式，如果需要則需在樣式文件中引入

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n88" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: inherit; position: relative !important; width: inherit;"> @import "../../app.wxss";</pre>

2. 骨架屏的使用

• 前言

  骨架屏可以理解為是當數據還未加載進來前，頁面的一個空白版本，在頁面完全渲染完成之前，用戶會看到一個樣式簡單，描繪了當前頁面的大致框架的骨架屏頁面，然后骨架屏中各個

  占位部分被實際資源完全替換，這個過程中用戶會覺得內容正在逐漸加載即將呈現，降低了用戶的焦躁情緒，使得加載過程主觀上變得流暢。

  例如: 菊花圖以外網上還流傳這各種各樣的loading動畫

• 實施

  1. 完全靠手寫HTML和CSS方式給每個頁面定制一套骨架屏(弊端)

  2. 利用預渲染的方式生成靜態(tài)骨架屏

     • 預渲染

     • 獲取節(jié)點

• 小程序代碼片段

  https://developers.weixin.qq.com/s/mT49Qtmn7qa9

3. seo處理

• 前言

  獲取瀏覽收益

• 優(yōu)化流程

  • 開啟seo(配置上)

    1. 做好自然搜索流量配置

    2. 小程序接入自然搜索

  • 優(yōu)化seo

    1. 確?？梢允珍涀龊?a target="_blank">WEB化

    2. 接入熊掌號

    3. 配置好域名

    4. 做好URL映射 -------小程序跳轉使用navigator標簽進行跳轉,這樣可以捕獲跳轉鏈接里的參數,url映射; 給小程序做url規(guī)則

    5. 優(yōu)化調整meta信息 ------tdk的設置 title keywords description 標題關鍵詞這些信息決定排名的關鍵

    6. 提交sitemap 信息流的使用,借用百度的推薦, 和網站的sitemap一樣，需要給百度方便抓

  • 算法

4.iphone系列下安全區(qū)踩的坑以及處理方式