微信小程序写以下程序: 1.创建两个页面,主页面和菜单页面。 2.主页面中有一个多行文本框和页面跳转按钮。 3.点击页面跳转按钮可以跳转至菜单页面。 4.在菜单页面进行商品选择,并将选择的商品放在微信缓存中传递给主页面。 5.如果多行文本框中没有参数而微信缓存有菜单页面传递过来的内容则在多行文本框中显示该内容。
时间: 2023-06-15 14:07:34 浏览: 171
微信小程序之页面跳转和参数传递的实现
下面是微信小程序的代码实现:
1.在 app.json 文件中配置两个页面:
```json
{
"pages": [
"pages/index/index",
"pages/menu/menu"
],
"window": {}
}
```
2.在主页面(pages/index/index)中添加一个多行文本框和一个跳转按钮:
```html
<view class="container">
<textarea bindinput="onInput" placeholder="请输入参数"></textarea>
<button bindtap="goToMenu">跳转至菜单</button>
</view>
```
3.在主页面的 js 文件中,定义跳转至菜单页面的函数:
```javascript
Page({
goToMenu() {
wx.navigateTo({
url: '/pages/menu/menu',
})
},
// ...
})
```
4.在菜单页面(pages/menu/menu)中添加商品列表和确认按钮:
```html
<view class="container">
<view class="list">
<view class="item" wx:for="{{products}}" wx:key="id" bindtap="selectProduct">
<checkbox value="{{item}}" checked="{{item.checked}}">{{item.name}}</checkbox>
</view>
</view>
<button bindtap="confirm">确认</button>
</view>
```
5.在菜单页面的 js 文件中,定义商品列表和确认函数,并将选择的商品存入微信缓存:
```javascript
Page({
data: {
products: [
{ id: 1, name: '商品1', checked: false },
{ id: 2, name: '商品2', checked: false },
{ id: 3, name: '商品3', checked: false },
],
},
selectProduct(e) {
const index = e.currentTarget.dataset.index
const products = this.data.products
products[index].checked = !products[index].checked
this.setData({ products })
},
confirm() {
const selectedProducts = this.data.products.filter(p => p.checked).map(p => p.name)
wx.setStorageSync('selectedProducts', selectedProducts)
wx.navigateBack()
},
})
```
6.在主页面的 js 文件中,定义多行文本框输入事件和获取微信缓存的函数,并在页面加载时判断是否有传递过来的参数:
```javascript
Page({
onInput(e) {
const value = e.detail.value
this.setData({ value })
},
onLoad() {
const selectedProducts = wx.getStorageSync('selectedProducts')
if (selectedProducts && !this.data.value) {
this.setData({ value: selectedProducts.join('\n') })
}
},
// ...
})
```
至此,一个简单的微信小程序就完成了。用户可以在主页面输入参数,然后跳转至菜单页面进行商品选择,选择完成后将选择的商品存入微信缓存并返回主页面,主页面会自动判断是否有传递过来的商品并显示在多行文本框中。
阅读全文