简单谈谈小程序开发和传统web开发的区别

为了一个比赛做了一套的web端和一个小程序端。对于有前后端开发经验的人，尤其是熟悉HTML和JavaScript的人，开发小程序其实是比较容易上手的，其基本逻辑与传统网页开发相似。

小程序的开发给我的感觉是，除了前端的开发环境有所不同之外，后端代码实际上没有太大变化。如果你已经有一个现成的网站后端实现，你可以直接利用现有的后端接口，只需专注于前端的开发，调用这些接口即可实现功能。 

一.小程序前端开发

微信小程序的开发一般是使用微信自带的微信小程序开发工具点击查看具体​​​​​​。这一篇基本上是把整体的操作下载安装的流程讲的很清楚了。这篇我主要聚焦于的是与HTML的一些区别

上面是一个微信小程序基本的一个项目结构，结构很清晰asset就是一些静态文件，component就是组件，page就是每一个页面，下面就是项目的一些配置app的js，json，使用方法和page里面的JS和JSON差不多，只不过它的权限更高，属于全局变量，可以在全局使用。

微信小程序的前端开发包括三种主要文件：

• WXML (WeiXin Markup Language)：类似于HTML，用于定义小程序的页面结构。
• WXSS (WeiXin Style Sheets)：类似于CSS，用于定义页面的样式和布局。WXSS扩展了CSS的一些功能，比如尺寸单位rpx（响应式像素）。
• JS：用于处理页面的逻辑，包括数据绑定、事件处理等。
• JSON：用于配置页面的相关参数，比如导航栏的标题、页面路径等。

 

 二.json举例

想要页面下可以点击分析和智能助手这两个功能，即在主页面上实现页面跳转，可以在app.json的文件下配置 

{
  "pages":[
    "pages/startupPage/startupPage",
    "pages/index/index",
    "pages/bot/bot"
  ],
  
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "心脏预警平台",
    "navigationBarTextStyle":"black"
  },
  
 
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#dddddd",
    "backgroundColor": "#333333",
    "list": [
    {
        "pagePath": "pages/index/index",
        "text": "分析",
        "iconPath": "assets/icon/home.png",
        "selectedIconPath": "assets/icon/home_selected.png"
    },
    {
        "pagePath": "pages/bot/bot",
        "text": "智能助手",
        "iconPath": "assets/icon/startupHeader.png",
        "selectedIconPath": "assets/icon/startupHeader.png"
    }
]
}
}

 三.样式区别

WXML（WeiXin Markup Language），看名字也知道实际上就是HTML的一个在微信上面的一个做了小小的变化做了，区别只是在于它包含了一些微信专属的小组件如<view>、<text>、<image>等，这些组件专门为移动设备优化。

 <view class="usermotto" style="width: 133rpx; display: block; box-sizing: border-box">
    <text>{{motto}}</text>
    <text>{{value}}</text>
  </view>

• <view>：类似于HTML中的<div>，用于创建一个容器，布局和组织其他组件。
• <text>：用于显示文本内容，类似于HTML中的<p>或<span>。
• <image>：用于显示图片，类似于HTML中的<img>。

WXSS与CSS的语法也大致相同，像下图的代码基本上没太大的区别。注意在CSS里面都是px而这里面出现了是rpx单位，rpx使得样式能够在不同屏幕尺寸和分辨率下自动适应。

.otherInfoArea {
  width: 90%;
  border-radius: 30rpx;
  margin: 20rpx;
  background-color: rgba(83, 83, 83, 0.527);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

.pressableList {
  display: flex;
  width: 100%;
  height: 100rpx;
  align-items: center;
  border: 1;
  padding-left: 40rpx;
  justify-content: space-between;
}

 

四.js区别

小程序和web的js用法上都没有什么区别，最重要的区别只是在于在网页上js代码一般用webapi如rest API。但是在微信上用的都是微信提供的一些接口。

比如相同实现从后端接收传递过来的值的功能：

小程序：

wx.request({
      url: 'http://localhost:5000/result2', // 服务器地址
      method: 'GET',
      success: (res) => {
        const result = res.data.result;
        //
       });

web

fetch('https://localhost/data')
  .then(response => response.json())
  .then(data => console.log(data));

同样就是实现一个生命周期函数（不同状态下进行什么的操作）这里相比较而言小程序它的格式要求规范会多一点，他必须要求那个JS每一个都要按照这个规范的样子。web这边可能就比较随意一点。web指的是html加javascript没有vue

小程序：

Page({
  onLoad(options) {
    console.log('页面加载，参数：', options);
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  }
});

web

document.addEventListener('DOMContentLoaded', function() {
  console.log('HTML文档已完全加载和解析');
});

window.addEventListener('load', function() {
  console.log('页面及所有资源加载完成');
});

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = '';  // 显示离开确认对话框
});

 下面就是一些常用的小程序一些函数

1. onLoad(options)：

   • 当页面加载时调用。options是页面跳转所带的参数。

2. onShow()：

   • 当页面显示时调用。比如从其他页面返回时或小程序从后台切换到前台时调用。

3. onReady()：

   • 当页面初次渲染完成时调用，通常用于获取页面的DOM节点等。

4. onHide()：

   • 当页面隐藏时调用。比如切换到其他页面或小程序进入后台时调用。

5. onUnload()：

   • 当页面卸载时调用，比如用户点击返回按钮或跳转到其他页面时。

6. onPullDownRefresh()：

   • 当用户下拉页面触发下拉刷新时调用。

7. onReachBottom()：

   • 当页面滚动到页面底部时调用。

8. onShareAppMessage()：

   • 当用户点击右上角的分享按钮时调用，返回分享信息。

 

五.后端区别 

 

在传统网页开发中，前端和后端需要更紧密地配合，前端还要处理数据更新和渲染。比如html需要一些样式来进行渲染但是如果不在后端给它运行的时候给他渲染的话那么这些样式可能不会出现。同时进行页面跳转，比方说我从该页面跳转到另一个页面，还需要后端特意的为每个页面实现一个渲染逻辑（除非你在前端再多用一些代码去完成）

微信小程序的设计的的确确简化了前后端的分离。前端只需专注于样式和界面，而后端则处理数据和接口。小程序的样式和页面结构完全在前端定义，有些页面它不存在于后端交互的时候就不需要给它进行渲染了。不需要依赖后端进行渲染，这使得页面展示和用户交互更为高效。

// 用户资料接口
app.get('/api/user-profile', (req, res) => {
  res.json({
    profilePictureUrl: 'profile.jpg',
    username: '点个赞'
  });
});

实现这个用户资料更新，小程序只用接收到我这个数据就够了。但是web需要一个加载重新加载渲染的功能。

// 用户资料接口
app.get('/api/user-profile', (req, res) => {
  res.json({
    profilePictureUrl: 'profile.jpg',
    username: '点个赞'
  });
});

// 客户端JavaScript（加载数据并更新页面）
fetch('/api/user-profile')
  .then(response => response.json())
  .then(data => {
    document.getElementById('profilePicture').src = data.profilePictureUrl;
    document.getElementById('username').textContent = data.username;
  });