正文

从零开始：手把手教你学会微信小程序开发与实战案例分享

/0 浏览量
0413

了解微信小程序

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的概念，用户扫一扫或搜一下即可打开应用。微信小程序开发，就是利用微信提供的开发工具和API，创建出能在微信内运行的应用程序。

微信小程序的优势

  1. 无需下载安装：用户无需在手机上安装任何应用，即可使用小程序。
  2. 即用即走：用户使用小程序完成特定任务后，无需退出，即可返回微信聊天界面。
  3. 流量入口丰富：微信拥有庞大的用户群体，小程序可以通过公众号、朋友圈、搜索等多种方式触达用户。

微信小程序开发环境搭建

1. 安装微信开发者工具

微信开发者工具是微信官方提供的一款开发工具，支持Windows、macOS和Linux操作系统。

# Windows
wget https://dldir1.qq.com/wechat/dev/devtools/mac/wechat-devtools-1.04.181201.dmg
# macOS
wget https://dldir1.qq.com/wechat/dev/devtools/mac/wechat-devtools-1.04.181201.dmg
# Linux
wget https://dldir1.qq.com/wechat/dev/devtools/linux/wechat-devtools-1.04.181201.tar.gz

2. 创建小程序项目

打开微信开发者工具，点击“新建项目”，填写项目名称、项目目录等信息，选择合适的模板即可创建一个新项目。

3. 配置小程序

在项目根目录下，打开app.json文件，配置小程序的相关信息，如名称、描述、版本号等。

{
  "appname": "我的小程序",
  "description": "这是一个示例小程序",
  "version": "1.0.0"
}

4. 编写小程序代码

在项目根目录下，创建app.js、app.wxss和app.wxml文件，分别编写小程序的逻辑、样式和结构。

// app.js
App({
  onLaunch: function() {
    // 小程序启动时执行的逻辑
  }
})

微信小程序开发实战案例

1. 微信小程序天气查询

1.1 获取天气数据

在微信小程序后台，申请天气API接口，获取天气数据。

1.2 页面布局

在pages目录下创建weather文件夹，包含weather.wxml、weather.wxss和weather.js文件。

<!-- weather.wxml -->
<view class="container">
  <input type="text" placeholder="请输入城市名" bindinput="bindInput" />
  <button bindtap="getWeather">查询天气</button>
  <view class="weather-info">
    <text>{{weatherData.city}}</text>
    <text>{{weatherData.temperature}}℃</text>
    <text>{{weatherData.weather}}</text>
  </view>
</view>

/* weather.wxss */
.container {
  padding: 20px;
}
.weather-info {
  margin-top: 20px;
}

// weather.js
Page({
  data: {
    weatherData: {}
  },
  bindInput: function(e) {
    this.setData({
      city: e.detail.value
    });
  },
  getWeather: function() {
    const city = this.data.city;
    wx.request({
      url: `https://api.weather.com/weather?city=${city}`,
      success: (res) => {
        this.setData({
          weatherData: res.data
        });
      }
    });
  }
})

1.3 运行小程序

点击微信开发者工具中的“预览”按钮，即可在手机上查看效果。

2. 微信小程序购物车

2.1 数据结构设计

在app.json中定义全局数据结构，如商品列表、购物车等。

{
  "globalData": {
    "goodsList": [
      {
        "id": 1,
        "name": "商品1",
        "price": 10
      },
      {
        "id": 2,
        "name": "商品2",
        "price": 20
      }
    ],
    "cart": []
  }
}

2.2 页面布局

在pages目录下创建cart文件夹，包含cart.wxml、cart.wxss和cart.js文件。

<!-- cart.wxml -->
<view class="container">
  <view class="goods-list">
    <block wx:for="{{goodsList}}" wx:key="id">
      <view class="goods-item">
        <text>{{item.name}}</text>
        <text>{{item.price}}元</text>
        <button bindtap="addToCart" data-id="{{item.id}}">加入购物车</button>
      </view>
    </block>
  </view>
  <view class="cart">
    <view class="cart-item" wx:for="{{cart}}" wx:key="id">
      <text>{{item.name}}</text>
      <text>{{item.price}}元</text>
      <button bindtap="removeFromCart" data-id="{{item.id}}">移除</button>
    </view>
  </view>
</view>

/* cart.wxss */
.container {
  padding: 20px;
}
.goods-list {
  margin-bottom: 20px;
}
.cart-item {
  margin-bottom: 10px;
}

// cart.js
Page({
  onLoad: function() {
    const cart = wx.getStorageSync('cart') || [];
    this.setData({
      cart: cart
    });
  },
  addToCart: function(e) {
    const id = e.currentTarget.dataset.id;
    const goodsList = wx.getStorageSync('goodsList') || [];
    const cart = this.data.cart;
    const item = goodsList.find(item => item.id === id);
    cart.push(item);
    wx.setStorageSync('cart', cart);
    this.setData({
      cart: cart
    });
  },
  removeFromCart: function(e) {
    const id = e.currentTarget.dataset.id;
    const cart = this.data.cart.filter(item => item.id !== id);
    wx.setStorageSync('cart', cart);
    this.setData({
      cart: cart
    });
  }
})

2.3 运行小程序

点击微信开发者工具中的“预览”按钮，即可在手机上查看效果。

总结

本文从零开始，手把手教你学会微信小程序开发，并通过实战案例展示了如何实现天气查询和购物车功能。希望本文能帮助你快速掌握微信小程序开发，并应用到实际项目中。

-- 展开阅读全文 --