微信小程序

一、认识小程序
1、概述
是一种不需要下载安装即可使用的应用APP
是一种寄宿于微信中的代码片段
不等于真实APP,不等于网站,不等于webapp
由wxml,wxss,js,json文件构成
里面的代码类似前端html,css,js

2.特点
--小:程序大小<1M
内存占用小,不用安装各种支持底层调用的程序(封装接口)
--方便:使用方便,卸载方便
Android上可以直接快捷到桌面,启动只需要点击
卸载:长按然后删除
--门槛低:会前端就可以进行开发
--成本低:平台大,流量多,推广成本低
--兼容性:兼容(操作系统兼容-不用android,ios两种工程师开发)

二、小程序开发
1.软件下载
--https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

2.软件安装
--安装
--启动(自己的微信扫描二维码)
--选择小程序

3.制作小程序
--添加项目
--无APPID:没有上线的作品都无需appid
--选择路径即可:本地代码所在的文件夹,必须制定空文件夹,否则表示打开一个项目。

三、小程序框架
1.app文件列表
1.1.文件构成
--app.json:全局配置信息
    json格式,主要由Pages,window,tabBar,networkTimeout,debug键组成
    pages键:注册的页面的可访问性,如果页面不注册将不能被访问
    window键:设置小程序的状态栏,导航条,标题,窗口背景色
    networkTimeout键:设置底部或顶部有tab栏可以切换页面
    debug键:设置是够开启debug模式

--app.js:全局时间处理、全局变量
    参数是一个对象{}:包含全局事件,自定义函数,自定义事件

--app.wxss:公用样式表
    全局css样式表:常用的布局思路flex布局
    flex盒子布局:
        新流体布局思路。可以解决浮动的一些问题
        父亲节点。儿子节点都可以设置属性
        父亲节点可以设置:
            display,flex-direction,justify-content,align-item,flex-wrap,align-content
        儿子元素可以设置:排列顺序,覆盖父align-items的设置,宽度百分比
        单位rpx:是一个相对单位,是微信开发出来的一个新单位,屏幕的宽度被设置成750rpx,无论屏幕多大,所以你想在任何屏幕下都是一半那就是375rpx

 2.页面级别文件列表
--.页面.json
    {}本页面中的配置信息,等于app.json中的window的值

--页面.js
    Page({})其中{}中包含全局事件,自定义事件函数,数据

--页面.wxml
    wxml文件相当于HTML小程序的布局文件
    view标记代表一个区域,类比div标记
    媒体组件image属性
    src,mode,binderror,bindload属性

--页面.wxss
    无需插入到wxml文件中,自动同名引用

四、WXML语法
1.wxml语法基础
1.1 数据绑定
    --使用ng的用法用{{}}调用变量

<view>{{message}}</view>

    --调用的是js中page方法中对象data的变量

上一篇: HTML5 新特性--增强型表单
下一篇: 无
作者邮箱: 203328517@qq.com