前端|微信小程序开发学习笔记(一)

五月 04, 2019

一.每一个用户访问到的页面都需要在全局配置中来登记它的访问路径

{
  "pages": [
    "pages/about/about",
    "pages/weekly/weekly"
  ]
}

二.在wxml中添加页面链接

navigator 将特定文本添加页面链接但不能放在text中
在wxml文件中 text元素的内容只能作为文本无法识别navigator 因此将navigator放在text外部

    <text>我</text>
    <navigator style='display: inline;' url='/pages/weekly/weekly' open-type='navigate' hover-class='nav-hover'>每周推荐</navigator>
    <text>一部好片</text>
<navigator style='display: inline;' url='/pages/weekly/weekly' open-type='navigate' hover-class='nav-hover' class='nav-default'>每周推荐</navigator>

wxss样式表中,样式规则发生冲突时 ,因为两个样式规则中的配置是相同的,谁在后面谁主导

因此将默认样式规则 nav-default放在nav-hover

三. 给小程序配置底部标签栏

配置tabBar-对若干一级页面的入口链接
全局配置app.json

准备icon图
在app.json中配置 tabBar

"tabBar": {
    "color": "",
    "backgroundColor": "",
    "selectedColor": "",
    "list": [
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "images/icons/home.png",
        "selectedIconPath": "images/icons/home-fill.png"
      },
      {
        "pagePath": "pages/weekly/weekly",
        "text": "每周推荐",
        "iconPath": "images/icons/fire (1).png",
        "selectedIconPath": "images/icons/fire-fill.png"
      }
    ]
  }

这时若使用文本链接应在navigator 的 open-type=’navigate’ 修改为 open-type=’switchTab’

在app.json中配置window顶部标题栏保证全局的设置相同

四.数据绑定 (动态的从服务区中获取)

1.传统方式
一般来说会在页面加载的过程中通过一个ajax调用来请求server返回本周推荐电影详情信息

var thisweekmovie = {
  name: "教父",
  comment: "最精彩的剧本,最真实的黑帮电影",
  imagePath: "/images/42.jpg"
}

document.getElementById(“t001”).innerHTML = thisWeekMovie.name
首先,这种方式需要我们在收到数据之后或者说每次这个数据被更新的时候,我们都需要执行这样一段代码来对这个视图进行更新.

2.理想方式

我们应该有一种机制能够让这个视图中的每一部分与对应数据做一个映射 ,做映射之后,开发者只需考虑如何获取这个数据,以及如何对这个数据进行更新,获取更更新后,视图会自动根据映射进行更新.
在小程序框架中,每一个页面所需要的各种数据,都是集中在这个页面所注册的页面对象中定义的.
“.js”脚本文件中定义页面对象.

weekly.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    thisweekmovie = {    /*内部状态变量*/
      name: "教父",
      comment: "最精彩的剧本,最真实的黑帮电影",
      imagePath: "/images/42.jpg"

    },
  count: 123,
  }
})

数据绑定内容定义好后,如何将数据在绑定输出到视图中显示要把count的值渲染输出到视图上显示,我们是通过一个双大括号进行数据绑定的.
即双括号中执行的JS

1	<text>{{count}}</text>

(前端框架Vue)

绑定对象的类属性

<view class="container">
  <image class="about-banner" src="{{thisWeekMovie.imagePath}}"></image>
  <text style="" >{{thisWeekMovie.name}}</text>    <!--/*style 用于文本类型-->
  <text>点评: {{thisWeekMovie.comment}}</text>

  <text>{{count}}</text>
</view>

通过开发者工具调试器的APPdata这个type,我们可以实时的调试每一个页面的所有内部状态变量的取值

五. 小程序运行环境与基本架构

运行环境:
每个小程序都是运行在它所在的微信客户端上的,通过微信客户端给它土工的运行环境,小程序可以直接获取微信客户端的原生体验和原生能力.

视图层和逻辑层
- 各自的描述语言 WXML视图文件和WXSS样式文件都是对渲染层的描述，脚本JS文件是对逻辑层的描述
- 各自的运行进程本例中about页和weekly页,都内置了一个webviewId的内部状态变量,来记录他们各自在几号weview进程之中进行渲染的.
  - 基于数据绑定和事件机制进行通讯
    基于数据绑定在逻辑层对应的逻辑代码对相应的数据进行更新之后,逻辑层会将更新之后的数据传递给视图层会找到对应更新的视图部分进行相应的更新
    基于事件机制视图层接收用户的交互反馈行为,将这个行为传递给逻辑层对应的事件处理函数进行处理.

六. 条件渲染

条件成立时组件才渲染生成.

wx:if
设置强烈推荐元素定义出来

1	<text wx:if= "{{thisWeekMovie.ishighlyRecommended}}" style="font-size:16px; color:red;">强烈推荐</text>

强烈推荐这个text的元素,它的渲染生成的条件是: 绑定到了thisWeekMovie.ishighlyRecommended属性上.

如果ishighlyRecommended: false 则不进行渲染即不进行显示

hidden

<text hidden= "{{!thisWeekMovie.ishighlyRecommended}}" style="font-size:16px; color:red;">强烈推荐</text>

从语义上说,使用hidden属性是,这个元素总是要先被渲染生成的,hidden属性只是控制了其可见性而已.

上述两种方式的区别
当使用hidden时控制条件发生切换,视图中的节点数没有变化,所以开销小;而条件渲染会改变节点数,比如将ishighlyRecommended: false 变为true时会生成对应的元素和所有的hold,将这些元素插入到相应节点中.
对于可见性需要频繁切换的时候,我们就不建议使用条件渲染,开销较大.
对于hidden而言即使用户没有强烈推荐这个电影,那么它也会在初始生成的时候去生成这样一个元素.

########################################################

查看评论