骨架屏(文章中间)

分享

1. 模板封装

2. 组件封装(组件化)

3. 骨架屏

4. 小程序seo处理

5. 对于在iphone系列下安全区踩的坑以及处理方式

6. 百度小程序与微信小程序区别

7. 使用微信的picker

8. 表单输入后清空处理

请教

• 页面A -> 页面B，页面B的操作触发了页面A的数据更新。返回-更新页面A的数据

  处理方法

  1. 在页面A监听onShow事件，在onShow事件触发时无脑更新页面数据。

  2. 通过EventBus来实现跨页面通信

1. 小程序template模板与component组件的区别和使用

• 前言

  程序的编写过程中，我们不难发现有很多雷同或者相同的代码，此时为了减轻我们的工作量，便可以通过建立“模板”来避免代码冗余的情况，因为在模板中定义代码片段，然后在不同的地方调用！

  这也就是"组件化"的存在性,也是趋势

• 二者区别

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

  而component组件则有自己的业务逻辑，可以看做一个独立的page页面。(地区选择,公共的地区选择----小程序管理后台;百度小程序底部tab选项卡)

• template模板

  • 模板创建

    建议在templates目录下再创建子目录，存放单独的模板

    [图片上传失败...(image-be518-1565939423532)]

    [图片上传失败...(image-ad5862-1565939423532)]

  • 模板文件

    template.wxml文件中能写多个模板，用name区分

    <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进行区分，页面调用的时候也是以name指向对应的template;

    2. template模板没有配置文件(.json)和业务逻辑文件（.js）,所以template模板中的变量引用和业务逻辑事件都需要在引用页面的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. 利用预渲染的方式生成静态骨架屏

     • 预渲染

     • 获取节点

• 小程序代码片段

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

3. seo处理

• 前言

  获取浏览收益

• 优化流程

  • 开启seo(配置上)

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

    2. 小程序接入自然搜索

  • 优化seo

    1. 确保可以收录做好WEB化

    2. 接入熊掌号

    3. 配置好域名

    4. 做好URL映射 -------小程序跳转使用navigator标签进行跳转,这样可以捕获跳转链接里的参数,url映射; 给小程序做url规则

    5. 优化调整meta信息 ------tdk的设置 title keywords description 标题关键词这些信息决定排名的关键

    6. 提交sitemap 信息流的使用,借用百度的推荐, 和网站的sitemap一样，需要给百度方便抓

  • 算法

4.iphone系列下安全区踩的坑以及处理方式