了解微信小程序
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的概念,用户扫一扫或搜一下即可打开应用。微信小程序开发,就是利用微信提供的开发工具和API,创建出能在微信内运行的应用程序。
微信小程序的优势
- 无需下载安装:用户无需在手机上安装任何应用,即可使用小程序。
- 即用即走:用户使用小程序完成特定任务后,无需退出,即可返回微信聊天界面。
- 流量入口丰富:微信拥有庞大的用户群体,小程序可以通过公众号、朋友圈、搜索等多种方式触达用户。
微信小程序开发环境搭建
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 运行小程序
点击微信开发者工具中的“预览”按钮,即可在手机上查看效果。
总结
本文从零开始,手把手教你学会微信小程序开发,并通过实战案例展示了如何实现天气查询和购物车功能。希望本文能帮助你快速掌握微信小程序开发,并应用到实际项目中。
