百度智能小程序JS逻辑迁移：从Web JavaScript到SWAN的实例对比

// HTML:
// <span id="count">0</span>
// <button id="btn">递增</button>

// JavaScript 逻辑:
let count = 0;
const countEl = document.getElementById('count');
const btnEl = document.getElementById('btn');

btnEl.addEventListener('click', () => {
  count += 1;
  // 直接操作 DOM 节点属性
  countEl.innerText = count;
  if (count >= 10) {
    countEl.style.color = '#71A397';
  }
});

<!-- page.swan 模板声明 -->
<view class="container">
  <text class="{count >= 10 ? 'highlight' : ''}">
    {{count}}
  </text>
  <button bindtap="handleIncrement">递增</button>
</view>

// page.js 逻辑层代码:
Page({
  data: {
    count: 0
  },
  handleIncrement() {
    // 通过 this.setData 派发差量数据
    this.setData({
      count: this.data.count + 1
    });
  }
});

function renderArticles(list) {
  const container = document.getElementById('list');
  // 拼接 HTML 字符串或频繁创建元素
  const html = list.map(item => `
    <div class="item" data-id="${item.id}">
      <h4>${item.title}</h4>
    </div>
  `).join('');
  container.innerHTML = html;
}

<!-- page.swan -->
<view class="list">
  <view s-for="item in articles" 
        trackBy="item.id" 
        class="item">
    <text>{{item.title}}</text>
  </view>
</view>

// page.js
Page({
  data: {
    articles: []
  },
  updateList(newList) {
    this.setData({
      articles: newList
    });
  }
});

// Web 端常规封装
export async function httpGet(url, params = {}) {
  const query = new URLSearchParams(params).toString();
  const fullUrl = query ? `${url}?${query}` : url;
  
  const token = localStorage.getItem('auth_token');
  const response = await fetch(fullUrl, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': token ? `Bearer ${token}` : ''
    }
  });
  
  if (!response.ok) throw new Error('网络异常');
  return await response.json();
}

// 小程序端 Promise 适配封装
export function httpGet(url, params = {}) {
  return new Promise((resolve, reject) => {
    // 替换 localStorage 为 swan 同步存储
    const token = swan.getStorageSync('auth_token');
    
    swan.request({
      url: url,
      method: 'GET',
      data: params,
      header: {
        'content-type': 'application/json',
        'Authorization': token ? `Bearer ${token}` : ''
      },
      success: (res) => {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

// Web: 寻找父容器做事件委托
const listEl = document.querySelector('.list-box');
listEl.addEventListener('click', (event) => {
  const item = event.target.closest('.list-item');
  if (item) {
    const id = item.dataset.id;
    const type = item.dataset.type;
    console.log('点击项目:', id, type);
  }
});

<!-- list.swan -->
<view class="list-box">
  <view s-for="item in list" 
        class="list-item" 
        data-id="{{item.id}}"
        data-type="{{item.type}}"
        bindtap="handleItemClick">
    <text>{{item.name}}</text>
  </view>
</view>

// list.js
Page({
  handleItemClick(e) {
    // 从 currentTarget.dataset 提取传递的属性
    const { id, type } = e.currentTarget.dataset;
    console.log('点击项目:', id, type);
    // 路由跳转替换 location.href
    swan.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    });
  }
});