微信小程序开发和运营
2024-05-17 09:19:38 12 举报AI智能生成
微信小程序开发和运营是指基于微信平台，利用微信小程序技术，进行应用程序的开发、测试、发布和运营的整个过程。微信小程序是一种无需下载、安装，即可在微信内使用的轻量级应用。开发小程序需要熟悉微信小程序开发工具、开发语言（如JavaScript、CSS等）、以及微信官方文档。运营小程序则涉及用户数据分析、功能优化、活动策划等方面，旨在提高用户活跃度和满意度。
作者其他创作
大纲/内容
微信（WeChat)是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序，于2017年1月上线。
小程序简介
1. 无需安装
2. 触手可及
3. 用完即走
4. 无需卸载
小程序的特性
简单的业务逻辑
使用频率低
小程序应用场景的特点
认识微信小程序
注册小程序账号
开发环境准备
微信开发工具的下载及安装
创建第一个小程序项目
运行及发布小程序
微信小程序开发流程
可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。
工具栏
选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
模拟区
编辑区
来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
目录文件区
调试小程序的控制面板，便于开发者排查错误
1：Console 面板
源文件调试信息页，用于显示当调试区左侧显示的是源文件的目录结构
2：Sources 面板
网络调试信息页，用于观察和显示网络请求reauest和 socket等网络相关的详细信息
3：Network面板
安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问题。
4：Security面板
数据存储信息页，开发者可以使用Wx.setStorage或者Wx.setStorageSync将数据存储到本地存储，存储在本地存储中的变心可以在Storage面板中显示。
5：Storage 面板
实时数据信息页，用于显示项目中被激活的所有页面的数据情况。
6：AppData面板
布局信息页，主要用于调试Wxml 组件和相关CSS样式，显示Wxml转的界面。
7：Wxml面板
重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟杉动设备用于调试重力感应API。
8：Sensor面板
路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android) 设备的路由信息。
9：Trace 面板
扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息。
扩展菜单项
调试区
微信小程序开发者工具界面功能介绍
小程序第一章总结
微信小程序概述
逻辑文件，主要用来注册小程序全局实例，在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。
app.js
公共设置文件，配置小程序全局设置。
app.json
主样式表文件，类似HTML的.css文件
主体文件
页面逻辑文件，编写JavaScript代码控制页面
.js文件
页面结构文件，设计页面布局，数据绑定
.wxml文件
页面样式表文件，定义各类样式表
.wxss文件
页面配置文件
.json文件
页面文件
小程序的基本目录
由WXML和WXSS编写，组件进行展示。
视图层
用于处理事务逻辑
逻辑层
1.页面临时数据或缓存 2.文件存储（本地存储） 3.网络存储与调用
数据层
小程序的开发框架
创建第一个页面文件
创建另一个页面文件
创建小程序页面
接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项。
1. pages配置项
负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。
2. window配置项
需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现
list(列表）接受数组值，数组中的每一项也都是一个对象。
3. tabBar配置项
小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。
4. networkTimeout配置项
用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console（控制台）面板上
5. debug配置项
全局配置文件
页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app.json）中的配置值。
配置文件
项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
项目逻辑文件
是对页面的第一次数据绑定，数据必须是可以转成JSON的格式(字符串、数字、布尔值、对象、数组)。
1.设置初始数据
定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
2.定义当前页面的生命周期函数
开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加人事件定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数。
3.定义事件处理函数
在Page对象中封装了一个名为setData()的函数，用来更新data中的数据。函数参数为Object，以“key:value”对的形式表示将this.data 中的key对应的值修改为value。
4.使用setData跟新数据
页面逻辑文件
逻辑层文件
使用双大括号({{}})将变量包起来，在页面中直接作为字符串输出使用。
1. 简单绑定
在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript 运算规则。
2.运算
数据绑定
指使用wx:if这个属性来判断是否数据绑定当前组件
1. wx:if条件数据绑定
通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性即可。
2. block wx:if条件数据绑定
条件数据绑定
使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件
1. wx:for
与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。
2. block wx:for
列表数据绑定
定义模板的格式为: <template name=\"模板名\">
1.定义模板
调用模板的格式为: <template is=\"模板名称\"data==\"{{传入的数据}}\"/>
2.调用模板
模板
如果在要引用的文件中定义了模板代码，则需要用import方式引用。
1. import方式
include方式可以将源文件中除模板之外的其他代码全部引入
2. include方式
引用页面文件
指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
冒泡事件
指某个组件上的事件被触发后，该事件不会向父节点传递。
非冒泡事件
小程序中的事件是用户的一种行为或通信方式，需要定义事件函数和调用事件。
页面事件
页面结构文件
1尺寸单位
如果需要在某个文件中引用另一个样式文件，使用@ import语句导人即可。
2样式导入
目前，WXSS仅支持CSS中常用的选择器，如.class、#id、element、:.before、:aftert等。
3选择器
4WXSS常用属性
页面样式文件
小程序第二章总结
微信小程序开发基础
盒子模型
(１) 一个块级元素占一行。
(４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(５) 块级元素可以容纳块级元素和行内元素。
块级元素
行内元素
行内块元素
块级元素和行内元素
元素浮动与清除
浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。
元素定位
浮动和定位
1.display
flex-direction用于设置主轴的方向，即项目排列的方向
2.flex——direction
3.flex-wrap
4.flex-flow
justify-content用于定义项目在主轴上的对齐方式。
5.justify-content
align-items用于指定项目在交叉轴上的对齐方式
6.align-items
align-content用来定义项目有多根轴线（出现换行后）在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用
7.align-content
容器属性
1.order
flex-grow定义项目的放大比例，默认值为0，即不放大
2.flex-grow
flex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小。
3.flex-shrink
flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto（即项目的本来大小）。
4.flex-basis
flex属性是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。
5.flex
align-self属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。
6.align-self
项目属性
flex布局
小程序第三章总结
页面布局
组件的定义和属性
1.view
相关属性可以实现滚动视图的功能
2.scroll-view
swiper组件可以实现轮播图、图片预览、滑动页面等效果
3.swiper
容器视图组件
1）icon
2）text
3）progress
基础内容组件
1）button
单选框用来从一组选项中选取一个选项
2）radio
3）checkbox
switch组件的作用类似开关选择器
4）switch
5）slider
１.普通选择器
2.多列选择器
3.时间选择器，日期选择器
4.省市选择器
6）picker
picker－view组件为嵌入页面的滚动选择器
7）picker-view
8）input
9）textarea
10）label
11）from
表单组件
1.缩放模式
２.裁剪模式
image组件为图像组件
image
audio组件用来实现音乐播放、暂停等
audio
video组件用来实现视频的播放、暂停等
video
camera
多媒体组件
map组件用于在页面中显示地图或路径
map
canvas
其他组件
小程序第四章总结
页面组件
1.开发流程简单，零门槛制作
2.行业模板多样，种类齐全
3.丰富的功能组件和强大的管理后台
即速应用的优势
1.菜单栏
2.工具栏
3.编辑区
4.属性面板
即速应用界面介绍
即速应用概述
１.双栏组件
基本(甚至高级) 的组件，放进面板组件里一起管理
２.面板组件
３.自由面板组件
４.顶部导航组件
５.底部导航组件
６.分割线组件
适用于电商、到店类小程序
７.动态分类组件
布局组件
用于展示文字、设置点击事件
１.文本组件
展示图片
２.图片组件
设置按钮
３.按钮组件
设置标题
４.标题组件
用于实现图片的轮播展示
５.轮播组件
６.分类组件
７.图片列表组件
用于展示图片、标题和简介
８.图文集组件
用于展示视频
９.视频组件
基本组件
是容纳基础组件来展示后台数据的容器
１.动态列表组件
显示个人相关信息的组件
２.个人中心组件
是一个容器组件
３.动态表单组件
提供信息发布或回复信息的组件
４.评论组件
可以用于点赞、统计浏览量等类似的计数功能
５.计数组件
６.地图组件
与列表类组件搭配使用
７.城市定位组件
悬浮窗组件通常出现在个人中心或商品列表页面
８.悬浮窗组件
高级组件
用于播放音乐
１.音频组件
２.动态容器组件
包括数据总览、访客分析和传播数据功能。
１.数据管理
主要提供可以分享应用的方式
２.分享设置
主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员卡等功能
３.用户管理
应用数据是后台管理的主要内容
４.应用数据
是前端软播组件的后台数据管理器
５. 轮播管理
通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果
６. 分类管理
７. 商品管理
８.经营管理
是小程序营销推广的有力工具
９.营销工具
管理功能
10.多商家管理
即速应用组件
即速应用后台管理
打包
上传
打包上传
小程序第五章总结
即速应用
wx.request(Object) 实现向服务器发送请求、获取数据等各种网络交互操作
发起网络请求
wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器
上传文件
wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地
下载文件
网络API
wx.chooseImage(Object)接口用于从本地相册选择图片或使用相机拍照
1.选择图片或拍照
wx.previewImage(Object)接口主要用于预览图片
２.预览图片
wx.getImageInfo(Object)接口用于获取图片信息
３.获取图片信息
４.保存图片到系统相册
图片API
wx.startRecord(Object)接口用于实现开始录音
１.开始录音
wx.stopRecord(Object)接口用于实现主动调用停止录音
２.停止录音
录音API
１.播放语音
２.暂停播放
wx.stopVoice(Object)用于结束播放语音
３.结束播放
音频播放控制API
wx.playBackgroundAudio(Object)用于播放音乐
１.播放音乐
wx.getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态
2.获取音乐播放状态
wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度
３.控制音乐播放进度
wx.pauseBackgroundAudio()接口用于暂停播放音乐
4.暂停播放音乐
wx.stopBackgroundAudio()接口用于停止播放音乐
5.停止播放音乐
6.监听音乐播放
7.监听音乐暂停
8.监听音乐停止
9.案例展示
音乐播放控制API
多媒体API
wx.saveFile(Object)用于保存文件到本地
１.保存文件
wx.getSaveFileList(Object) 接口用于获取本地已保存的文件列表
２.获取本地文件列表
wx.getSaveFileInfo(Object)接口用于获取本地文件的文件信息
３.获取本地文件的文件信息
wx.removeSaveFile(Object)接口用于删除本地存储的文件
４.删除本地文件
wx.openDocument(Object)接口用于新开页面打开文档
５.打开文档
文件API
１.wx.setStorage(Object)
保存数据
wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容
１.wx.getStorage(Object)
wx.getStorageSync(key)从本地缓存中同步获取指定key对应的内容。其参数只有key
２.wx.getStorageSync(key)
获取数据
wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。
１.wx.removeStorage(Object)
wx.removeStorageSync(key)接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key。
２.wx.removeStorageSync(key)
删除数据
１.wx.clearStorage()
wx.clearStorageSync()接口用于同步清理本地数据缓存
２.wx.clearStorageSync()
清空数据
本地数据及缓存API
wx.getLocation(Object)接口用于获取当前用户的地理位置、速度
获取位置信息
wx.chooseLocation(Object)接口用于在打开的地图中选择位置
选择位置信息
wx.openLocation(Object)接口用于在微信内置地图中显示位置信息
显示位置信息
位置信息API
wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息
获取系统信息
wx.getNetWorkType(Object)用于获取网络类型
１.获取网络状态
wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化
２.监听网络状态变化
网络状态
wx.makePhoneCall(Object)接口用于实现调用手机拨打电话
拨打电话
扫描二维码
设备相关API
小程序第六章总结
API应用
data.js文件数据
创建数据文件
image目录存放项目的所有图像，pages目录中的项目页分别为index（首页）、detail（内容页）、detail-all（详情页）和booking（预约页），utils目录中包括项目中所有数据的data.js文件以及小程序的项目配置文件。
创建项目目录结构
app.json文件结构
准备工作
轮播项
导航项
列表项
首页
内容页
详情页
预约页
案例分析——秦岭山水
注册Bmob账号
创建应用
配置小程序密钥
下载及安装Bomb SDK
比目后端云简介
创建表及字段
添加一条记录用来实现把从前端获取的数据添加到服务端数据表中，主要用Bmob提供的SDK对象实现
添加一条记录
获取一条记录是指从数据表中查询一条记录，主要根据objectId值来直接获取单条数据对象
获取一条记录
修改一条记录，则首先需要获取更新后的Bmob. Object对象，将值修改后保存数据就可以了
修改一条数据
删除一条记录可以使用Bmob.Object的destroy方法
删除一条数据
为了获取某个数据表中的所有数据，我们可以通过Bmob提供的Query对象来实现
查询所有数据
Bmob中提供的查询方法主要有：等于（equalTo）、不等于（notEqualTo）、小于(lessThan）、小于等于（lessThanOrEqualTo）、大于（greaterThan）、大于等于（greaterThanOrEqualTo）等
条件查询
limit方法限制查询结果的数据条数来进行分页
skip方法可以做到跳过查询的前多少条数据来实现分页查询的功能
分页查询
数据的增、删、改、查
Bmob提供了文件后端保存功能。利用这一功能，我们可以把本地文件上传到Bmob后台，并按上传日期为文件命名
上传一张图片并显示
Bmob支持一次传多张图片，并将图片保存到素材库中
上传多张图片并显示
上传图片
小程序第八章总结
小程序后端开发
附近的小程序入口
通过关键词推广
1）相互转化
2）更多营销
3）更多的·流量
通过公众号关联方式推广
通过好友分享、社群和朋友圈推广
线上运营推广方式
1.通过特定场景做线下推广
2.通过已有门店做线下推广
通过地面推广的方式做线下推广
线下推广方式
1小程序商店、公众号
2.新媒体软文
3.运营公司推广
第三方推广
转化率高
数据准确
门槛更低
合理裂变
小程序营销优势
快速购物
社交能力
快速导航
历史信息
小程序运营案例
小程序运营
微信小程序开发和运营
收藏
0 条评论
回复 删除
下一页
