项目安排-小程序开发

项目安排-小程序开发

1.项目简介

此小程序是开发版小程序。需要制作一个静态小程序，它不涉及数据交互，因此不在线。它主要是一个销售汽车零部件的模拟商场。大致有四个部分。除了包含一些显示信息的“主页”，主要部分是“商城”部分。因为它是静态的，所以它主要显示商品的细节，并添加了购物车功能。

2.项目文件结构

基本上，它是微信开发者工具的原始文件结构。图片、页面、样式、app.js、app.json、app.wxss、weui.wxs

（1） app：。js：主要指全局公共js方法声明和调用文件

（2） app。Json：它是小程序的全局配置文件。所有页面都在这里注册。它包括小程序的所有页面路径、界面性能、网络超时、底部选项卡等。

（3） app：。wess：它是applet的全局CSS文件。此文件中设置了一些公共样式

（4） 页面文件夹对应于所有页面。每个页面可以添加四种类型的文件：。wxml、，。wxss、，。js、，。json公司

微信小程序要求每个js文件中的方法不能直接引用或调用，必须使用模块导出。导出方法

app。json中的pages字段可以知道当前小程序的所有页面路径，而tabBar字段可以在小程序的底部设置板。

3.微ui

微UI是一个与微信原生视觉体验一致的基本样式库，由微信官方设计团队为微信内部页面和微信小程序设计。

项目中的大多数元素都是从WEUI引用的。Npm。

4.小程序开发模式

一些框架（React和Vue）采用MVVM开发模式来分离渲染和逻辑。JS不再直接控制DOM，只需要管理状态。

小程序使用这种方法，使用双花括号“｛｛｝｝”

WXML具有“数据绑定”、“列表呈现”、“条件渲染”、“模板”和“事件”功能。

请注意，WEML没有“双向绑定”，它的数据绑定是单向的。

在Vue中，可以使用v模型实现输入框的双向数据绑定。

在applet中，您可以使用｛｛｝｝将js（即逻辑层）中定义的数据呈现为wxml（即视图层）。但是，当视图层的组件值发生变化时，逻辑层无法通过此变量直接获取最新值。

然而，也有解决方案。这里我们可以看到博客作者的写作方法：用bindinput等属性绑定一个方法，方法的参数得到一个对象事件。当组件的值发生变化时，将触发该方法，并且可以使用event.detail获取组件的最新值。方法中的值。

5.JS交互逻辑

响应用户的按钮单击，并在按钮上声明bindtap属性。

您还可以在JS中调用小程序提供的API，例如获取用户信息、本地存储、微信支付等。

在pages/index/index中，Js调用以获取微信用户的头像和昵称，最后通过setData将获取的信息显示在界面上。

6.小程序-云开发

由于小程序代码包的大小限制在2M以下，因此需要尽可能压缩代码或资源。在项目中，我使用了小程序的云开发平台，它具有“存储”功能：直接在小程序前端上传和下载云文件，并在云开发控制台上进行可视化管理。将项目中的绝大多数图像资源上传到云端，并在打开小程序时从云端下载，解决了代码包过大的问题。

7.小程序服务器数据库

小程序无法直接连接到数据库进行数据操作，但基本上使用onLoad:function（）请求中的wx向服务器发送请求，然后服务器程序（如PHP）对数据库执行数据操作。