微信小程序的设计与实现

微信小程序的设计与实现

目录

1.系统简述：

2.开发工具及相关技术：

2.1 HTML、WXSS、JAVASCRIPT技术

2.2 Vanilla框架

2.3 uni-app框架

2.4 MYSQL数据库

3.工程结构及其说明：

4.主要功能展示

4.1登录

4.2 注册

4.3 首页界面

4.3.1 轮播图

4.3.2 中英翻译功能

4.3.3 其他功能界面

4.4 发现

4.4.1 视频播放功能

4.5 总体刷新功能

5运行教程

5.1 配置服务器域名：

5.2 运行

1.系统简述：

这款微信小程序利用Vanilla以及uni-app的框架，通过web+MYSQL的方式实现基本的功能。

2.开发工具及相关技术：

2.1 HTML、WXSS、JAVASCRIPT技术

·WXML是标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。

·WXSS（WeiXin Style Sheets）是一种样式表语言，用于小程序的开发和界面渲染以及描述WXML的组件样式，类似于网页开发中的CSS。

·逻辑层(App Service)小程序开发框架的逻辑层是由JavaScript编写。

2.2 Vanilla框架

·原生小程序开发框架，也称为Vanilla框架，是微信官方提供的原始开发方式。微信小程序官方框架MINA分为两部分：视图层和 逻辑层。其中视图层描述语言为 WXML (WeiXin Markup Language)和 WXSS(WeiXin Style Sheets)，这个小程序官方框架的思想和vue还是有相似之处的，不过这个框架是直接使用微信小程序所需要的wxml、wxss等文件。使用原生框架开发，需要熟悉微信小程序的API和语法，代码写在WXML、WXSS和JavaScript文件中。原生框架灵活性较高，但开发复杂度也相对较高。

2.3 uni-app框架

·Uni-App是一家公司(DCloud)产品,公司承诺将一直开源且免费。 公司旗下有4个产品: HBuilder X:开发工具 uni-app:跨平台统一框架 uniCloud:云服务提供商 uniMPsdk:Mobile端sdk,用于接入uni-app开发的模块。是一种基于Vue.js的跨平台开发框架，支持编译为微信小程序、H5、App等多个平台。uni-app的语法类似于Vue.js，开发者可以使用Vue的语法来编写小程序。

2.4 MYSQL数据库

·MySql是最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System：关系数据库管理系统)应用软件之一。MySql数据库有以下特点：

·Mysql是开源的，所以你不需要支付额外的费用。

·Mysql支持大型的数据库。可以处理拥有上千万条记录的大型数据库。MySQL使用标准的SQL数据语言形式。

·Mysql可以允许于多个系统上，并且支持多种语言。这些编程语言包括C、C++、Python、Java、Perl、PHP、Eiffel、Ruby和Tcl等。

·Mysql对PHP有很好的支持，PHP是目前最流行的Web开发语言。MySQL支持大型数据库，支持5000万条记录的数据仓库，32位系统表文件最大可支持4GB，64位系统支持最大的表文件为8TB。

·Mysql是可以定制的，采用了GPL协议，你可以修改源码来开发自己的Mysql系统。

云开发数据库：小程序还可以使用云开发数据库来进行数据的持久化存储。云开发数据库是一个具备实时数据同步能力的JSON数据库，可在小程序中直接使用，无需搭建服务器。

3.工程结构及其说明：

项目名称mini-app包的说明：

pages	用来存放所有小程序的页面
utils	用来存放工具性质的模块（例如：格式化时间的自定义模块）
app.js	小程序项目的入口文件
app.json	小程序项目的全局配置文件
app.wxss	小程序项目的全局样式文件
project.config.json	项目的配置文件
sitemap.json	用来配置小程序及其页面是否允许被微信索引

4.主要功能展示

4.1登录

登录界面： 

登录成功时，会给出提示，并跳转：：

4.2 注册

注册界面：

当信息填写不完整时，会给出提示：

如果该手机号被注册会显示：

注册过后的信息会被保留在数据库中，在CMS中可以看到。

4.3 首页界面

4.3.1 轮播图

选择微信小程序中的<swiper><swiper-item>，图片由于微信小程序中要满足图片和音频资源大小不超过200K，所以我是存储在cnd中，选择公开，点击详情，获取地址。

4.3.2 中英翻译功能

在百度API中，获取API Key和Secret Key ,在获取access_token，网络发起请求：wx.request

部分代码：

wx.request({

  url: 'https://aip.baidubce.com/rpc/2.0/mt/texttrans/v1?access_token=' +this.data.token,

  data: {

   ‘from’:’zh’,

‘to’:’en’,

‘q’:this.data.text

  },

  header: {

    'content-type': 'application/json' 

  },  

method:'POST',

  success (res) {

    console.log(res.data)

  }

})

4.3.3 其他功能界面

4.4 发现

发现界面：（点击对应的图标即可跳转，我在设置时，担心有人会点击文字部分，所以点击文字也可以跳转到对应页面）

4.4.1 视频播放功能

发现界面点击对应的图标跳转过后，出现对应的视频,可以发布弹幕，以及小窗口。。点击小窗口，当你退出来的时候就会出现一个弹窗。

4.5 总体刷新功能

   在.js中的window加入"enablePullDownRefresh": true,

开启下拉刷新，并在这里面将light更改为dark ，"backgroundTextStyle":"dark",

5运行教程

将安装包解压到当前文件夹，在微信开发者工具这个软件中，需要进行的操作：

5.1 配置服务器域名：

http://aipbaidubce.com

需要重启小程序，显示如下，才算成功

5.2 运行

第一步：准备开发环境

首先，您需要安装并配置微信开发者工具。您可以从微信公众平台的官方网站下载并安装该工具。

第二步：导入

打开微信开发者工具，选择小程序->导入

//如果没有小程序这个选择，选择"新建小程序"，然后填写相关信息，包括小程序的名称、AppID等。后端服务选择不适用云服务，模板选择JS点击"确定"后，就可以开始创建小程序项目了。（不过后面需要将project.config.json做修改）

第三步：导入小程序源码

将您获得的小程序源码导入到微信开发者工具中。可以通过点击"导入项目"按钮，选择源码所在的文件夹。 

第四步：进行调试和修改

在微信开发者工具中，您可以对小程序进行调试和修改。可以通过编辑代码、添加页面和组件等方式来定制和完善小程序的功能。

导入项目过后，在.project.config.json里面修改成你自己项目的APPID：

·预览->二维码或者自动预览

第五步：配置小程序的基本信息

在微信开发者工具中，您可以设置小程序的基本信息，包括小程序的图标、名称、描述等。