php软件开发--微信小程序

小程序介绍：

小程序是什么：

      微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，开发门槛相对较低。

发展历史：

      2016年微信之父张小龙、公布微信小程序。

如何理解小程序：

      不是h5、用完即走、一次开发多端兼容、基于微信客户端。

小程序与传统app区别：

      局限性：必须依赖于微信，不能独立运行。

      优势：不需要考虚兼容问题，安装的问题，开发难度小。

开发工具：

      微信开发者工具、vscode等

小程序文件结构及配置：

小程序架构结构：

      .json 后缀的 JSON 配置文件

      .wxml 后缀的 WXML 模板文件 类html

      .wxss 后缀的 WXSS 样式文件 类css

      .js 后缀的 JS 脚本逻辑文件  业务代码所书写的区域

      注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

app.json中不能添加任何注释，key和value必须用双引号引起来，否则会报错。

app.json：

      pages（页面路径）、window（窗口样式）、tabBar（底部tab）、networkTimeout（网络请求）、debug（调试）

生命周期：

onLoad(Object query)：页面加载时触发。

onShow()：页面显示/切入前台时触发。

onReady()：页面初次渲染完成时触发。

onHide()：页面隐藏/切入后台时触发。

onUnload()：页面卸载时触发。

视图结构wxml：

js数据传递视图（异步传递数据）： this.setData({ msg: "Hello World" })

在视图显示数据（数据绑定）：<view>{{变量}}</view>

wx: 开头的属性：if\else、for等

      列表渲染 for：wx:for-index（下标）、wx:for-item（元素）、wx:key（标识符）

      条件渲染if：wx:if、wx:elif 和 wx:else

      模板：代码片段 template

      引用：引用 import

小程序样式wxss：

WXSS 具有 CSS 大部分特性：

新增了尺寸单位 rpx：屏幕宽度：750rpx

提供了全局的样式和局部样式：app.wxss（全局样式）page的wxss（局部样式）

样式优先级：行内样式  >  page.wxss  > app.wxss

WXSS 仅支持部分 CSS 选择器：.class、#id、element、element,element、::after、::before

样式导入：@import 语句;

Flex布局：

弹性布局：设置Flex布局以后，子元素的float、clear和vertical-align属性将失效

基本概念：Flex布局的元素，称为Flex容器，简称”容器”。容器所有子元素即容器成员，称为Flex项目，简称”项目”

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

容器：display：flex

flex-direction属性：主轴的方向

row | row-reverse | column | column-reverse;

flex-wrap属性：是否换行

nowrap | wrap | wrap-reverse;

justify-content属性：主轴上的对齐方式

flex-start | flex-end | center | space-between | space-around;

align-items属性：交叉轴上的对齐方式

flex-start | flex-end | center;

align-content属性：多轴的对齐方式

 flex-start | flex-end | center | space-between | space-around | stretch

事件:

将用户的行为反馈到控制逻辑层进行处理,视图层到控制逻辑层的通讯方式.

 分类：

     冒泡事件【bind】、非冒泡事件【catch】

     tap、longpress、touchstart、touchmove、touchcancel、

     transitionend、animationstart、animationiteration、animationend、touchforcechange

事件绑定：

     bindtap、catchtouchstart

     bind:tap、catch:touchstart

 事件对象：

     type、timeStamp、target、currentTarget

常用小程序组件：

    注意：所有组件与属性都是小写，以连字符中横线【-】连接

    属性值类型：

        Boolean、Number、String、Array、Object、EventHandler、Any

    共同属性类型：

        id、class、style、hidden、data-*、bind*、catch*

    视图容器组件：

        view：

            hover-class、hover-stop-progation、hover-start-time、hover-stay-time

        swiper：

            indicator-dots、indicator-color、indicator-active-color、autoplay、current、current-item-id

        scroll-view：

            scroll-x、scroll-y、upper-threshold、lower-threshold、scroll-top

    基本内容组件：

        text：

            selectable、space【ensp、emsp、nbsp】、decode

        rich-text：

            nodes、space

    表单组件：

        button：

            open-type：【share、contact】

        input：

            value、type、password、placeholder、placeholder-style、

        form：

            report-submit、bindsubmit、bindreset

    导航：

        navigation：

            url、open-type【navigate、redirect、switchTab、relaunch、navigateBark、exit】

    媒体组件：

        image：

            src、mode、lazy-load、binderror、bindload

        video：

            src、initial-time、duration、controls、danmu-list

自定义组件：

    类似页面，自定义组件 json、wxml、wxss、js

    目录：/ > components > component

    组件声明.json：usingComponents：component-tag-name

WXS模块：

    WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

   目录： / > wxs > wxs

    调用： <wxs src="../../tools.wxs" module="tools" />

    小程序中，wxss wxml 引入用绝对地址、wxs js 引入相对地址