在微信小程序编写过程当中，为避免内容重复、页面过多造成的代码体量大的问题，笔者通过navigator组件 url传参解决了这个问题：
一、问题描述
A页面中存在a，b，c，d四个按钮，分辨跳转到新页面。但是制作4个新页面明显会造成工作量大和代码体量大。同时，这四个按钮的新页面格式一样，仅仅是内容不同，即四个页面可以用相同的.wxml、.wxss、.js文件表示。
二、新建页面
原本需要新建5个页面（A+a,b,c,d）的情况，其实只需要新建2个页面（A+B），示意图如下。
在app.js文件中添加两个页面
"pages": [
"pages/A/A",
"pages/B/B"
],三、页面构建
此时构建A页面和B页面基本代码如下：
A.wxml(初始版)：此时在模拟器中依次点击四个按钮，均可跳转到B页面。
<!--pages/A/A-->
<view class="container">
<text>pages/A页面/A页面</text>
</view>
<view class="container">
<navigator url="../B/B"><view>按钮a</view></navigator>
<navigator url="../B/B"><view>按钮b</view></navigator>
<navigator url="../B/B"><view>按钮c</view></navigator>
<navigator url="../B/B"><view>按钮d</view></navigator>
</view>B.wxml(初始版)：在B页面中简单设置输出文字段的代码。
<!--pages/B/B.wxml-->
<text>pages/B/B.wxml</text>
<view class="container">
<view>
<view>
<text>topic:{{topic}}\n</text>
<text>content:{{content}}</text>
</view>
</view>
</view>B.js(初始版)
Page({
/**
* 页面的初始数据
*/
data: {
topic:"",
content:""
}
})#测试——B.js与B.wxml之间的数据传输
Page({
/**
* 页面的初始数据
*/
data: {
topic:"123",
content:"321"
}
})
测试结果：可正常传输数据
四、连接数据库
1.使用微信开发者工具的“云开发”功能新建数据库B，并输入4条记录。
2.修改数据库读写权限：所有人可读写
3.B.js连接数据库B
const DB = wx.cloud.database().collection("B")
Page({
……
})4.B.wxml通过B.js连接数据库
获取数据：B.wxml
<!--pages/B/B.wxml-->
<text>pages/B/B.wxml</text>
<view class="container">
<view wx:for="{{ne}}">
<view>
<view>
<text>topic:{{item.topic}}</text>
<text>content:{{item.content}}</text>
</view>
</view>
</view>
</view>B.js
const DB = wx.cloud.database().collection("B")
Page({
getData() {
DB.where({
type:"a"
}).
get({
success: res => {
console.log(res.data)
this.setData({ //收集数据到ne中并返回
ne: res.data
})
},
fail(res) {
console.log("查询失败", res)
}
})
},
/**
* 页面的初始数据
*/
data: {
topic:"",
content:""
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
this.getData()
}
})此时，仅得到type:"a"的记录，如下
B.wxml通过B.js连接数据库成功
五、navigator组件 url传参
A.wxml中navigator组件 url传参
<!--pages/A/A-->
<view class="container">
<text>pages/A页面/A页面</text>
</view>
<view class="container">
<navigator url="../B/B?type=a"><view>按钮a</view></navigator>
<navigator url="../B/B?type=b"><view>按钮b</view></navigator>
<navigator url="../B/B?type=c"><view>按钮c</view></navigator>
<navigator url="../B/B?type=d"><view>按钮d</view></navigator>
</view>B.js设置接收参数函数
const DB = wx.cloud.database().collection("B")
Page({
getData() {
DB.where({
type:this.data.type //修改为传参的数据
}).
get({
……
})
},
/**
* 页面的初始数据
*/
data: {
topic:"",
content:"",
type:"" //声明一个传参的数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
type:options.type
})
}
})效果如下，达到预期效果：
六、优化建议
本文仅仅介绍了实现该功能的基本要素，下面进行优化的建议：
1.美观展示B界面；
2.数据库中记录中的topic字段和content字段可以存储不同的内容，只要type字段的内容相同即可；
3.url地址还可以传递多个参数，用“&”隔开即可：文章来源：https://www.toymoban.com/news/detail-508668.html
<navigator url="../B/B?type=a&topic=AAA"><view>按钮a</view></navigator>4.未完待续，一起进步！文章来源地址https://www.toymoban.com/news/detail-508668.html
到了这里，关于微信开发者工具 小程序 navigator组件 url传参的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
