起名网小程序源码
时间 : 2024-01-11 14:59:03声明： : 文章内容来自网络，不保证准确性，请自行甄别信息有效性
最佳答案
这是一个起名网小程序的源码示例：
```javascript
//index.js
const app = getApp()
Page({
data: {
nameList: [], // 存储起名结果的数组
inputName: '', // 输入的名字
searchHistory: [], // 搜索历史记录
},
// 监听输入框输入事件
onInputChange(event) {
this.setData({
inputName: event.detail.value
})
},
// 点击搜索按钮事件
onSearch() {
// 进行搜索逻辑，可以调用后端API获取起名结果
const result = this.generateName(this.data.inputName);
// 更新搜索历史记录
const searchHistory = this.data.searchHistory;
searchHistory.unshift(this.data.inputName); // 将新搜索的名字添加到首位
this.setData({
nameList: result,
searchHistory,
})
},
// 生成起名结果的方法
generateName(name) {
// 根据输入的名字生成起名结果，这里只是示例，实际业务逻辑可以根据需求自行编写
return [
name + "大师",
name + "之光",
name + "灵感",
name + "之道",
];
},
// 清除历史记录
clearHistory() {
this.setData({
searchHistory: [],
});
},
onLoad() {
// 加载时从本地存储中获取历史记录
const searchHistory = wx.getStorageSync('searchHistory') || [];
this.setData({
searchHistory,
});
},
onUnload() {
// 页面关闭时将历史记录存储到本地
wx.setStorageSync('searchHistory', this.data.searchHistory)
}
})
```xml
<!--index.wxml-->
<view class="container">
<view class="search-wrapper">
<input class="input" value="{{inputName}}" bindinput="onInputChange" placeholder="请输入名字"/>
<button class="search-btn" bindtap="onSearch">搜索</button>
</view>
<view class="history-wrapper">
<view class="title">搜索历史</view>
<view class="history-list">
<view wx:for="{{searchHistory}}" wx:key="{{index}}" bindtap="onSearchHistoryTap">{{item}}</view>
</view>
<button class="clear-btn" bindtap="clearHistory">清除历史</button>
</view>
<view class="result-wrapper">
<view class="title">起名结果</view>
<view class="result-list">
<view wx:for="{{nameList}}" wx:key="{{index}}">{{item}}</view>
</view>
</view>
</view>
/*index.wxss*/
.container {
padding: 20rpx;
}
.search-wrapper {
display: flex;
align-items: center;
margin-bottom: 30rpx;
}
.input {
flex: 1;
height: 60rpx;
padding: 0 20rpx;
border: 1rpx solid #999;
border-radius: 30rpx;
font-size: 28rpx;
}
.search-btn {
height: 60rpx;
line-height: 60rpx;
margin-left: 10rpx;
padding: 0 30rpx;
font-size: 30rpx;
background-color: #16a085;
color: #fff;
border-radius: 30rpx;
}
.history-wrapper .title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.clear-btn {
height: 40rpx;
line-height: 40rpx;
font-size: 26rpx;
margin-top: 20rpx;
text-align: right;
color: #999;
}
.clear-btn:active {
color: #666;
}
.result-wrapper .title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.result-list {
margin-bottom: 30rpx;
}
.result-list view {
font-size: 28rpx;
margin-bottom: 10rpx;
}以上是一个简单的起名网小程序的源码示例，其中包含了输入框的监听、搜索按钮的点击事件、生成起名结果的方法、历史记录的存储和清除等功能。你可以根据自己的需求进行修改和扩展。
其他答案
以下是一个起名网小程序的源码示例：
```javascript
// app.js
App({
onLaunch: function () {
// 初始化
this.initData();
},
// 初始化数据
initData: function () {
const names = [
'金刚',
'小明',
'花花',
// 更多名称...
];
this.globalData.names = names;
},
globalData: {
names: [],
}
})
```json
// app.json
{
"pages": [
"pages/index/index",
"pages/nameList/nameList",
"pages/nameDetail/nameDetail",
// 更多页面...
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "起名网",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#707070",
"selectedColor": "#000000",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/icon_home.png",
"selectedIconPath": "images/icon_home_selected.png"
},
{
"pagePath": "pages/nameList/nameList",
"text": "名字列表",
"iconPath": "images/icon_list.png",
"selectedIconPath": "images/icon_list_selected.png"
},
{
"pagePath": "pages/nameDetail/nameDetail",
"text": "名字详情",
"iconPath": "images/icon_detail.png",
"selectedIconPath": "images/icon_detail_selected.png"
}
]
}
}
```xml
<!-- index.wxml -->
<view class="container">
<view class="title">起名网</view>
<view class="subtitle">欢迎来到起名网，为您的孩子起一个好名字！</view>
<button class="button" bindtap="goToNameList">开始起名</button>
</view>
```javascript
// index.js
Page({
goToNameList: function () {
wx.navigateTo({
url: '/pages/nameList/nameList',
})
}
})
```xml
<!-- nameList.wxml -->
<view class="container">
<view class="title">名字列表</view>
<view class="subtitle">选择一个名字：</view>
<scroll-view class="scroll-view" scroll-y="{{true}}">
<view class="name-item" wx:for="{{names}}" wx:key="index" bindtap="goToNameDetail">
{{item}}
</view>
</scroll-view>
</view>
```javascript
// nameList.js
const app = getApp();
Page({
data: {
names: [],
},
onLoad: function (options) {
this.setData({
names: app.globalData.names,
});
},
goToNameDetail: function (event) {
const name = event.currentTarget.dataset.name;
wx.navigateTo({
url: '/pages/nameDetail/nameDetail?name=' + name,
});
}
})
```xml
<!-- nameDetail.wxml -->
<view class="container">
<view class="title">名字详情</view>
<view class="subtitle">名字: {{name}}</view>
<!-- 更多名字详情的显示 -->
</view>
```javascript
// nameDetail.js
Page({
data: {
name: '',
},
onLoad: function (options) {
const name = options.name;
this.setData({
name: name,
});
},
})
这里只是给出了一个简单的起名网小程序的源码示例，你可以根据自己的需求进行修改和扩展。此示例中包括了首页、名字列表和名字详情三个页面的实现，以及全局数据的使用。具体的页面样式和交互逻辑需要根据实际需求自行定义和编写。
https/SSL证书广告优选IDC>>
推荐主题模板更多>>
推荐文章
