项目准备

准备工作

注册开发者账号
获取 appid
安装开发者工具
创建项目(注意网络状态)

小程序项目架构

wxml -> html 页面架构
wxss -> css 样式
js -> js 逻辑
json 配置（

全局, 配置页面路由, 默认窗口样式, 底部栏页面配置窗口样式, 优先级较高）

配置文件注意点

标题背景色只能用十六进制, 文字只有黑白
页面配置样式跟 usingComponents 同级, 不要嵌套
json 文件不能有注释

模板语法

插值表达式

插值表达式, 无论是数据渲染还是属性绑定都是用 {{}}

条件渲染

条件渲染 wx:if 通过销毁的形式隐藏引号和大括号之间不能有空格 hidden 通过样式的形式隐藏

列表渲染

列表渲染 wx:for 默认数据是 item 索引 index 可以修改 wx:key, 如果是普通简单数据数组 *this, 如果是对象的数组, 应该是唯一属性属性名字符串(通常是 id)

事件处理

事件处理 bind:事件名如果不想冒泡还可以用 catch 传参的时候需要使用自定义属性

事件绑定

传参

函数当中 data 读取和设置

函数里面读取或者设置 data 数据读取, this.data.属性名设置调用 this.setData

读取

设置

tabBar 配置

    "tabBar": {
        "color": "#333",
        "selectedColor": "#f00",
        "backgroundColor": "#fff",
        "list": [
            {
                "text": "首页",
                "pagePath": "pages/index/index",
                "iconPath": "/icons/home.png",
                "selectedIconPath": "/icons/home-o.png"
            },
            {
                "text": "分类",
                "pagePath": "pages/index2/index2",
                "iconPath": "/icons/category.png",
                "selectedIconPath": "/icons/category-o.png"
            },
            {
                "text": "购物车",
                "pagePath": "pages/index3/index3",
                "iconPath": "/icons/cart.png",
                "selectedIconPath": "/icons/cart-o.png"
            }
        ]
    },

小程序样式

后缀名 wxss
不支持通配符
有两种类型全局和局部
新的相对单位 rpx
1. 满屏宽度默认是 750 rpx
2. 一般再工作当中设计师给出设计稿如果是 750整数倍, 稍加换算即可
3. 还可以使用插件自动帮忙转换, 只需要设置好设计稿宽度即可

内置组件

image

有默认宽高 320 x 240

swiper

直接子元素只能是 swiper-item

他也有默认宽高 100% x 150

跟图片默认宽高不一样,

如果轮播图要套图片, 需要微调两者尺寸

navigator

类似 web a 标签但是是块级元素

如果跳转到特定页面需要定义 open-type

比如如果切换到底部 tab 页要设为 switchTab

如果要跳转之后当前这个页面销毁, 可以设为 redirect

button

rich-text

多选框和单选框

他们非常像

都要给每个选项一个标记 value, 都可以在选项改变后触发 change 事件

区别在于多选框可以选多个, 触发事件的到一个数组, 所有被选中的都在里面

而单选框则只能选一个, 触发事件得到的是被选中的那个数据

<!-- 单选框组 -->
<!-- 单选框, 应该给每个选项一个标记 value
当你选中时应该能够得到这个标记 监听group 的 change 事件即可-->
<radio-group bind:change="radioChange">
  <label>
    <radio  value="kfc"/>肯德基
  </label>
  <label>
    <radio  value="macdo"/>麦当劳
  </label>
  <label>
    <radio  value="split"/>华莱士
  </label>
  <label>
    <radio  value="alittle"/>一点点
  </label>
</radio-group>
    

<!-- 多选框组
其实跟单选框是一样, 也是多个选项
每个选项给一个标记 value
监听这个多选框组的 change 事件, 每当发生改变就获取数据即可 -->
<checkbox-group bind:change="checkboxChange">
  <label>
    <checkbox  value="kfc"/>肯德基
  </label>
  <label>
    <checkbox  value="macdo"/>麦当劳
  </label>
  <label>
    <checkbox  value="split"/>华莱士
  </label>
  <label>
    <checkbox  value="alittle"/>一点点
  </label>
</checkbox-group>

自定义组件

创建和使用

自定义组件续

父传子

子传父

准备动作

数据传递

生命周期

应用级

onLaunch 初始化

onShow 切到前台

onHide 切到后台

页面级

onLoad => created 页面创建

onReady => mounted 页面渲染完毕