微信小程序开发与运营
2024-05-23 09:39:31 0 举报AI智能生成
登录查看完整内容
微信小程序开发与运营是一门涉及微信小程序设计、开发、上线、推广及运营的技术。作为轻量级应用，微信小程序具有“即用即走”的特点，不需要用户下载安装，通过扫描二维码或使用微信内搜索即可使用。在设计阶段，开发人员需要关注用户体验和界面设计，确保小程序的易用性和吸引力。开发阶段则需使用微信官方提供的开发工具和API，实现小程序的功能。上线前，需通过微信审核，确保内容合规。运营阶段，通过各种推广手段，提高小程序的曝光率和用户粘性，包括利用微信社交功能、营销活动、数据分析等。同时，根据用户反馈和市场需求，对小程序进行迭代优化。
作者其他创作
大纲/内容
小程序简介
微信小程序的特点触手可及，无需安装，用完即走。
小程序的特征
小程序应用场景的特点
认识微信小程序
注册小程序
开发环境准备
开发工具下载及安装
创建小程序项目
运行及发布微信小程序
小程序的开发流程
工具栏中可以实现多种功能，如小程序的编译，预览，切换后台，清理缓存等
工具栏
模拟区中选择模拟手机的类型，显示比例，网络类型
模拟区
可以进行目录的文件创建，可以进行“硬盘打开”，“重命名”，删除等
目录文件区
编辑区中支持对.wxml，.wxss，.js，及.json文件
编辑区
调试区
小程序开发者工具功能介绍
小程序概述
页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。
app.js文件
用于设计页面的布局、数据绑定等，类似HTML中的.html文件
app.json
类似HTML的.CSS文件。在主样式表文件中设置的样式在其他页面中同样有效
app.wxss
主体文件
在该文件中编写JavaScript代码控制页面的逻辑
.js文件
.wxml文件
用于定义本页面中用到的各类样式表
.wxss文件
页面配置文件
.json文件
页面文件
小程序的基本目录结构
MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。
视图层
逻辑层用于处理事务逻辑
逻辑层
数据层在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用。
数据层
小程序的开发框架
数组的第一项设置小程序的初始页面
小程序新增或删除都要在里面修改
文件名不需要写文件拓展名
pages
window
tabBar
networkTimeout
debug
全局配置项
全局配置文件
项目逻辑文件app.js中可以通过APP函数注册小程序生命周期函数
项目逻辑文件
页面逻辑文件的主要功能有：设置初始数据，定义当前页面的生命周期函数，定义事件处理函数
页面逻辑文件
逻辑层文件
简单绑定是指使用双大括号（{ { } }）将变量抱起来
简单绑定
在{ { } }内可以做一些简单的运算（主要有算术运算，逻辑运算，三元运算，字符运算）
运算
数据绑定
wx：if
block wx：if
条件数据绑定
wx:for
block wx:for
列表数据绑定
页面结构文件
页面样式文件（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 上外边距，右外边距，底外边距和左外边距。所以一个盒子实际所占有的宽度（高度）应该由“内容”+“内边距”+“边框”+“外边距”组成。
盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内容（content），内边距（padding），边框（border）和外边距（margin）4个部分组成。
盒子模型
（1）一个块级元素占一行（2）块级元素的默认高度由内容决定，除非自定义高度（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度（4）块级元素的宽度，高度，外边距及内边距都可以自定义设置（5）块级元素可以容纳块级元素和行内元素
块级元素
（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定。（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素。（3）同一块内，行内元素和其他行内元素显示在同一行。
行内元素
行内块元素
块级元素与行内元素
元素浮动与清除：none-----默认值，表示元素不浮动left------元素向左浮动right------元素向右浮动
static--默认值，该元素按照标准流进行布局relative--相对定位，相对于它在原本挡流的位置进行定位，它后面的盒子仍以标准流方式对待它；absolute--绝对定位，相当于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响fixed--固定定位，相对于浏览器窗口进行定位。
元素定位
浮动与定位
flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器（flex container），flex布局的所有直接子元素自动成为容器的成员，称为flex容器
容器属性
项目属性
flex布局
页面布局
组件是页面视图层（WXML）的基本组成单元，组件结合可以构建功能强大的页面结构
组件的定义及属性
view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面(User Interface，UI)组件，通过设置view的CSS 属性可以实现名种复杂的布局
通过设置scroll-view 组件的相关属性可以实现滚动视图的功能
scroll-view
swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper 组件由<swiper/>和<swiper -item/>两个标签组成，它们不能单独使用
swiper
容器视图组件
icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cance等
icon
text组件用于展示内容，类似HTML中的<span>，text组件中的内容支持长按选中，支持转义字符“\\”，属于行内元素
text
progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素
progress
基本内容组件
button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。
button
单选框用来从一组选项中选取一个选项。在小程序中单选框由<radio-group/>（单项选择器）和<radio/>（单选项目）两个组件组合而成
radio
复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox-group/>（多选择器）和<checkbox/>(多选项目)两个组件组合而成
checkbox
switch组件的作用类似开关选择器
switch
slider组件为滑动选择器，可以通过滑动来设置相应的值
slider
普通选择器
多列选择器
日期选择器
省市选择器
picker
picker-view组件为嵌入页面的滚动选择器
picker-view
input组件为输入框，用户可以输入相应的信息
input
textarea组件为多行输入框组件，可以实现多行内容的输入。
textarea
label组件为标签组件，用于提升表单组件的可用性
label
form组件为表单组件，用来实现将组件内的用户输入信息进行提交当<form/>表单中formType为hi的<budo/>组件时，会将表单组件中的vdse值进行提交
from
mage组件为图像组件，与HTML中的<img/>类似
image
多媒体组件
audio
video
表单组件
页面组件
1、开发流程简单，零门槛制作2、行业模板多样，种类齐全3、丰富的功能组件和强大的管理后台
即速应用优势
即速应用概述
双栏组件
面板组件
自由面板组件
顶部导航组件
底部导航组件
分割线组件
动态分类组件
布局组件
即速应用组件
文本组件
图片组件
按钮组件
标题组件
轮播组件
分类组件
图片列表组件
图文集组件
基本组件
动态列表组件
个人中心组件
动态表单组件
评论组件
计数组件
地图组件
城市定位组件
悬浮窗组件
高级组件
音频组件
动态容器组件
其他组件
数据管理
分享设置
用户管理
应用数据
轮播管理
分类管理
商品管理
经营管理
营销工具
多商家管理
即速应用后台管理
打包
上传
打包上传
即速应用
网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络API接口
wx.request(0bject)实现向服务器发送请求、获取数据等各种网络交互操作
发起网络请求
wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求
上传文件
wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTP GET 请求，返回文件的本地临时路径
下载文件
网络API
多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API，其目的是丰富小程序的页面功能
wx.chooseImage(Object)接口 用于从本地相册选择图片或使用相机拍照wx.previewImage(Object)接口 用于预览图片wx.getImageInfo(Object)接口 用于获取图片信息wx.saveImageToPhotosAIbum(Object) 接口 用于保存图片到系统相册
wx.previewImage(Object)接口主要用于预览图片
预览图片
获取图片信息
保存图片到系统相册
图片API
wx.startRecord（Object）接口 用于实现开始录音wx.stopRecord（Object）接口 用于实现主动调用停止录音
开始录音
wx.stopRecord（Object）接口用于实现主动调用停止录音
停止录音
录音API
wx.playBackgroundAudio(0bject)接口 用于播放音乐。wx.getBackgroundAudioPlayerState(Object)接口 用于获取音乐播放状态wx.seekBackgroundAudio(0bject)接口 用于定位音乐播放进度。wx.pauseBackgroundAudio()接口 用于实现暂停播放音乐。wx.stopBackgroundAudio()接口 用于实现停止播放音乐。wx.onBackgroundAudioPlay(CalBack)接口用于实现监听音乐播放wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停wx.onBackgroundAudioStop(CallBack)接口 用于实现监听音乐停止
wx.playBackgroudAudio(Object)用于播放音乐，用于播放同一时间只能有一首音乐处于播放状态
播放语音
接口调用成功后返回的参数
wx.getBackgroundAudioPlayState(Object)接口用于获取音乐播放状态
获取音乐播放状态
wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度
控制音乐播放进度
wx.pauseBackgroundAudio()接口用于暂停播放音乐
暂停播放音乐
wx.stopBackgroundAudio()接口用于停止播放音乐
停止播放音乐
监听音乐播放
wx. onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被 wx. pauseBackgroundAudio()方法触发。在CallBack 中可以改变播放图标。
监听音乐暂停
wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止，通常被音乐自然播放停止或wx.seekBackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发。在CalBack中可以改变播放图标
监听音乐停止
案例展示
音频播放控制API
多媒体API
从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口:wx.saveFile(0bject)接口 用于保存文件到本地。 wx.getSavedFileList(0bject)接口 用于获取本地已保存的文件列表。 wx.getSaveFilelnfo(0bject)接口 用于获取本地文件的文件信息。 wx.removeSaveFile(Object)接口用于删除本地存储的文件。 wx.openDocument(0bject)接口用于新开页面打开文档，支持格式:doc、xls、ppt、pdf、docx、xlsx、ppts .
wx.saveFile（Objcet）用于保存文件到本地
保存文件
wx. getSavedFileList(0bject)接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳(从1970/01/0108:00:00到当前时间的秒数)文件列表
获取本地文件列表
wx. getSaveFileInfo(0bject)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx.getFileInfo(0bject)接口
获取本地文件的文件信息
wx.removeSaveFile(Object)接口用于删除本地存储的文件
删除本地文件
打开文档
文件API
wx.setStorage（Object）接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来的key对应的内容
保存数据
wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容
获取数据
wx.removeStorage(Object)接口用于从本地缓存中异步移除指定 key
删除数据
wx.clearStorage()接口用于异步清理本地数据缓存，没有参数
清空数据
本地数据及缓存API
wx.getLocation(Object)接口 用于获取位置信息。wx.chooseLocation(Object)接口用于选择位置信息。wx.openLocation(Object)接口 用于通过地图显示位置。
wx.getLocation(Objcet)调用成功后，返回的参数
wx.getLocation(Object)接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息
获取位置信息
wx.chooseLocation(Object)调用成功后
wx.chooseLocation(Object)接口用于打开的地图中选择位置，用户选择为之后可返回当前位置的名称，地址，经纬度新信息
选择位置信息
wx.openLocation(Object)接口用于在微信内置地图中显示位置信息
显示位置信息
位置信息API
wx. getSystemInfo(Object)接口、wx.getSystemInfoSyne()接口 用于获取系统信息wx. getNetworkType(Object)接口 用于获取网络类型。wx.onNetworkStatusChange(CallBack)接口 用于监测网络状态改变。wx.makePhoneCall(Object)接口 用于拨打电话。wx.scanCode(Object)接口 用于扫描二维码
wx.getSystemInfo()接口或wx.getSystemInfoSync()接口调用成功后，返回系统相关信息
wx. getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息
获取系统信息
wx.getNetworkType(Object)用于获取网络类型
获取网络状态
网络状态
wx.makePhoneCall(Object)接口用于实现调用手机拨打电话
拨打电话
扫码成功后，返回的数据如表
wx.scanCode(Object)接口用于调起客户端扫码界面，扫码成功后返回相应的内容
扫描二维码
设备相关API
API应用
创建数据文件
创建项目目录结构
准备工作
index.js
index.wxml
index.wxss
index.json
首页
detail.js
detail.wxml
detail.wxss
detail.json
内容页
detail-all.js
detail-all.wxml
detail-all.wxss
detail-all.json
详情页
booking.js
booking.wxml
booking.wxss
booking.json
预约页
秦岭山水案例
注册Bmob账号
创建应用
配置小程序密钥
获取服务器域名及在小程序中配置
比目后端云简介
创建表及字段
添加一条记录
获取一条记录
修改一条记录
删除一条记录
查询所有数据
条件查询
分页查询
数据的增、删、改、查
上传一张图片并显示
上传多张图片并显示
上传图片
需求分析
视图层设计
数据库设计
代码实现
简单留言板
小程序后端开发
附近的小程序入口
通过关键词推广
通过公众号关联方式推广
通过好友分享】社群和朋友圈推广
线上运营推广方式
通过特定场景做线下推广
通过已有的门店做线下推广
通过地面推广的方式做线下推广
线下运营推广方式
小程序商店、公众号
新媒体软文
运营公司推广
第三方推广
转化率高
数据准确
门槛更低
合理裂变
小程序营销优势
小程序运营案例
小程序运营
微信小程序开发与运营
收藏
0 条评论
回复 删除
下一页
