微信小程序开发与运营

2024-05-15 20:08:10   7  举报





AI智能生成

微信小程序是一种轻量级的应用程序，无需下载安装即可使用。本课程将详细介绍微信小程序的开发与运营。通过学习，你将掌握微信小程序的架构、开发工具和API，并了解如何将小程序与其他服务集成。此外，本课程还将探讨微信小程序的运营策略，包括如何提高用户活跃度、留存率和转化率，以及如何进行数据分析和优化。通过学习这门课程，你将能够自主开发并运营微信小程序，为移动互联网带来全新的用户体验。

前端开发

作者其他创作

大纲/内容

一、小程序概述

微信小程序的特征：

1.无须安装
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
2.触手可及
用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通。
3.用完即走
用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走。
4.无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载。

应用场景的特点：

1、简单的业务逻辑 2、低频度的使用

二、微信小程序开发基础

小程序基本目录结构

主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小程序的整体配置，它们的名称是固定的。
app.js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
appjson小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。 app.wxss小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据 app.json 设置的路径找到相对应的资源进行数据绑定。
        .js文件页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
        .wxml 文件页面结构文件，用于设计页面的局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
        .wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss 中的样式规则;否则，直接使用 app. wxss中指定的样式规则。该文件在页面中不可缺少。
        .json 文件页面配置文件。该文件在页面中不可缺少。

小程序的开发框架

视图层

对于微信小程序而言，视图层就是所有.wxml文件和wxss文件的集合。.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言逻辑层就是所有.js脚本文件的集合。

数据层

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

页面临时数据或缓存

在Page中，使用setDate函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值

setDate()函数的参数接收一个对象，以（key，value）的形式表示将key在this.date中对应的值改变成value

文件存储

使用数据API接口 wx.getStorage 获取本地数据缓存。 wx.setStorage 设置本地数据缓存。 wx.clearStorage 清理本地数据缓存

网络存储与调用

上传或下载文件API接口

        wx.request        发起网络请求。

        wx.uploadFile        上传文件。

        wx.downloadFile        下载文件。

        调用URL的API接口

        wx.navigateTo        新窗口打开页面

        wx.redirectTo        原窗口打开页面

配置文件

全局配置文件

pages配置项

pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages配置项是必填项。
设置pages 配置项时，应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时，都需要对数组进行修改。
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。

{
"pages":[
"pages/news/news",
"pages/index/index"
]
}

window配置项

window配置项负责设置小程序状态栏、导航条、标题、背景窗口等

"window": {
"navigationBarBackgroundcolor":"#fff","navigationBarTextStyle": "black",
"navigationBarTitleText":"小程序window 功能演示","backgroundColor":"#ccc",
"backgroundTextStyle": "light"
}

tabBar 配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。

其中，list接受数组值，数组中的每一项也都是一个对象。

{
"tabBar":{
"color":"#666666"，
"selectedColor":"#ff0000"，"borderStyle":"black".
"backgroundColor":"#ffffff"，
"list":[
{

"pagePath":"pages /index/index","iconPath": "images /index1.png",
"selectedIconPath":"images/index2.png","text":"首页"
}，
{
"pagePath": "pages /news /news","iconPath": "images/news1.png",
"selectedIconPath":"images /news2.png","text":"新闻"
}
]
}
}

networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置进行统一设置，不能在API中单独设置。

debug 配置项

debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上。

页面配置文件

页面配置文件(*.json)只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件(app.json)中的配置值。
页面中的window配置只需书写配置项，不必书写window。

{ "navigationBarBackgroundColor":"#ffffff"， "navigationBarTextStyle": "black", "navigationBarTitleText":"页面window 配置演示", "backgroundColor":"#eeeeee","backgroundTextStyle": "light" }

逻辑层文件

项目逻辑文件

项目逻辑文件app.js中可以通过APP（）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其它页面逻辑文件中通过getAPP（）获取。

页面逻辑文件

页面逻辑文件的主要功能：设置初始数据；定义当前页面的生命周期函数：定义事件处理函数等。

页面结构文件

数据绑定

简单绑定：指用大括号（{{ }}）将变量包起来，在页面中直接作为字符串输出使用

条件数据绑定

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。 wx:if条件数据绑定：指使用wx:if这个属性来判断是否数据绑定当前组件

模板

在小程序中，如果要经常使用几个组件的组合，通常要把这几个组件结合定义为一个模板，在以后需要的文件中直接使用。

引用页面文件

import方式：如果在要引用的文件中定义了模板代码、则需要用import方式引用。 include方式：include方式可以将源文件中除模板之外的其他代码全部引入，相当于将源文件中的代码复制到include所在的位置。

页面事件

页面样式文件

尺寸单位

样式导入

为了便于管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件中引用另一个样式文件，使用@import 语句导人即可

//a.wxss
.cont { border:1px solid #f00;}
//b.wxss
@ import "a.wxss;"
.cont {padding:5rpx; margin:5px;}//b.wxss
.cont { border:lpx solid #f00; Padding:5px;margin:5px;}

选择器

WXSS常用属性

三、页面布局

盒子模型

块元素和行内元素

块级元素：block

特点： 1、一个元素占一行； 2、可以设置宽高； 3、可以设置内、外边距； 4、可以容纳块级元素和行内元素；

行内元素：inline

特点： 1、不能设置宽高，其高度由内容决定； 2、不可以容纳块级元素，只能容纳文本和其它行内元素； 3、同一块内，行内元素和其它行内元素显示在同一行； 4、一行显示不全时自动换行；

行内块元素：inline - block

特点： 1、可以设置宽高； 2、同一行内显示； 3、空间不够时会自动换行；

浮动与定位

元素浮动与清除

元素的浮动就是指设置了浮动属性的元素会脱离标准文档流的控制并且不再占用原文档流的位置，移到其父元素中指定位置的过程。在CSS中通过float属性来定义浮动：

{float:none|left|right;}

元素定位

在CSS中通过position属性可以实现对页面元素的精准定位。

{position:static|relative|absolute|fixed}

flex布局

flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器（flex container），flex布局的所有直接子元素自动成为容器的成员，成为flex项目（flex item）。

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

主轴的开始位置叫做main start；结束位置叫做main end。

交叉轴的开始位置叫做cross start；结束位置叫做cross end；

设置display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。

容器属性

项目属性

四、页面组件

组件的定义及属性

组件是页面视图层的基本组成单元，组件组合可以构建功能强大的页面结构。

组件的语法格式：

<标签名属性名 = "属性值">内容...</标签名>
组件通过属性来进一步细化。

id：组件的唯一表示，保持整个页面唯一。

class：组件的样式类，对应WXSS中定义的样式。

style：组件的内联样式，可以动态设置内联样式。

hidden：组件是否显示。

data-*：自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的current Target.dataset方式来获取自定义属性的值。

bind*/catch*：组件的事件，绑定逻辑层相关事件处理函数。

容器视图组件

view：块级组件

scroll-view

swiper

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

<swiper - item/>组件为滑块组件，只能放置在<swiper/>中。

基础内容组件

icon图表组件

text组件

text组件用于展示内容，支持长按选中，支持转义字符 “\”,属于行内元素/。

progress组件

显示进度状态

表单组件

button按钮

radio单选框

checkbox复选框

swith开关选择器

slider滑动选择器