微信小程序开发与运营

微信小程序的特点触手可及，无需安装，用完即走。

工具栏中可以实现多种功能，如小程序的编译，预览，切换后台，清理缓存等

模拟区中选择模拟手机的类型，显示比例，网络类型

可以进行目录的文件创建，可以进行“硬盘打开”，“重命名”，删除等

编辑区中支持对.wxml，.wxss，.js，及.json文件

app.js文件

app.json

app.wxss

.js文件

.wxml文件

.wxss文件

.json文件

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

逻辑层用于处理事务逻辑

数据层在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用。

全局配置项

项目逻辑文件

页面逻辑文件

数据绑定

条件数据绑定

列表数据绑定

页面样式文件（wxss）是基于css拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示

width和height 内容的宽度和高度

padding-top，padding-right，padding-botton和padding-left 上内边距，右内边距，底内边距和左内边距。

border-top，border-right，border-botton和borde-left 上边框，右边框，底边框和左边框。

margin-top，margin-right，margin-bottom和margin-left 上外边距，右外边距，底外边距和左外边距。

所以一个盒子实际所占有的宽度（高度）应该由“内容”+“内边距”+“边框”+“外边距”组成。

（1）一个块级元素占一行

（2）块级元素的默认高度由内容决定，除非自定义高度

（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度

（4）块级元素的宽度，高度，外边距及内边距都可以自定义设置

（5）块级元素可以容纳块级元素和行内元素

（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定。

（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素。

（3）同一块内，行内元素和其他行内元素显示在同一行。

static--默认值，该元素按照标准流进行布局

relative--相对定位，相对于它在原本挡流的位置进行定位，它后面的盒子仍以标准流方式对待它；

absolute--绝对定位，相当于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响

fixed--固定定位，相对于浏览器窗口进行定位。

通过设置scroll-view 组件的相关属性可以实现滚动视图的功能

swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper 组件由<swiper/>和<swiper -item/>两个标签组成，它们不能单独使用

icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cance等

text组件用于展示内容，类似HTML中的<span>，text组件中的内容支持长按选中，支持转义字符“\”，属于行内元素

progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素

button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。

单选框用来从一组选项中选取一个选项。在小程序中单选框由<radio-group/>（单项选择器）和<radio/>（单选项目）两个组件组合而成

复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox-group/>（多选择器）和<checkbox/>(多选项目)两个组件组合而成

switch组件的作用类似开关选择器

slider组件为滑动选择器，可以通过滑动来设置相应的值

普通选择器

多列选择器

日期选择器

省市选择器

picker-view组件为嵌入页面的滚动选择器

input组件为输入框，用户可以输入相应的信息

textarea组件为多行输入框组件，可以实现多行内容的输入。

label组件为标签组件，用于提升表单组件的可用性

form组件为表单组件，用来实现将组件内的用户输入信息进行提交当<form/>表单中formType为hi的<budo/>组件时，会将表单组件中的vdse值进行提交

image

1、开发流程简单，零门槛制作

2、行业模板多样，种类齐全

3、丰富的功能组件和强大的管理后台

双栏组件

面板组件

自由面板组件

顶部导航组件

底部导航组件

分割线组件

动态分类组件

wx.request(0bject)实现向服务器发送请求、获取数据等各种网络交互操作

wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求

wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTP GET 请求，返回文件的本地临时路径

wx.chooseImage(Object)接口 用于从本地相册选择图片或使用相机拍照

wx.previewImage(Object)接口 用于预览图片

wx.getImageInfo(Object)接口 用于获取图片信息

wx.saveImageToPhotosAIbum(Object) 接口 用于保存图片到系统相册

预览图片

获取图片信息

保存图片到系统相册

wx.startRecord（Object）接口 用于实现开始录音

wx.stopRecord（Object）接口 用于实现主动调用停止录音

开始录音

停止录音

wx.playBackgroundAudio(0bject)接口 用于播放音乐。wx.getBackgroundAudioPlayerState(Object)接口 用于获取音乐播放状态wx.seekBackgroundAudio(0bject)接口 用于定位音乐播放进度。
wx.pauseBackgroundAudio()接口 用于实现暂停播放音乐。
wx.stopBackgroundAudio()接口 用于实现停止播放音乐。
wx.onBackgroundAudioPlay(CalBack)接口用于实现监听音乐播放wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停wx.onBackgroundAudioStop(CallBack)接口 用于实现监听音乐停止

播放语音

获取音乐播放状态

控制音乐播放进度

暂停播放音乐

停止播放音乐

监听音乐播放

监听音乐暂停

监听音乐停止

案例展示

wx.saveFile（Objcet）用于保存文件到本地

wx. getSavedFileList(0bject)接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳(从1970/01/0108:00:00到当前时间的秒数)文件列表

wx. getSaveFileInfo(0bject)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx.getFileInfo(0bject)接口

wx.removeSaveFile(Object)接口用于删除本地存储的文件

wx.openDocument(Object)接口用于新开页面打开文档,支持格式有doc、xls、ppt、pdf、docx、xlsx、pptx

wx.setStorage（Object）接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来的key对应的内容

wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容

wx.removeStorage(Object)接口用于从本地缓存中异步移除指定 key

wx.clearStorage()接口用于异步清理本地数据缓存，没有参数

wx.getLocation(Object)接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息

wx.chooseLocation(Object)接口用于打开的地图中选择位置，用户选择为之后可返回当前位置的名称，地址，经纬度新信息

wx.openLocation(Object)接口用于在微信内置地图中显示位置信息

wx. getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息

获取网络状态

wx.makePhoneCall(Object)接口用于实现调用手机拨打电话

wx.scanCode(Object)接口用于调起客户端扫码界面，扫码成功后返回相应的内容