未完待续
今日完成
完成选择页面样式
明日计划
推进任务 完成推荐职业页面
遇到的问题
小程序开发软件莫名其妙崩了
代码文件可打开但不可修改
使用vscode修改后正常
关闭后重启 格式化代码快捷键失效 且编译报错
把相关代码还有和这个history文件夹下的代码文件删除编译依旧报错 无奈新建项目
遇到的问题
发送网络请求时报错
原因
官方限制
解决方法
在后台添加域名 公众号平台=>开发=>开发者设置=>服务器域名 进行添加
添加后貌似有延迟 我的过了好久还是没有成功
不过可在该设置中勾选以便测试可以使用
页面的onLoad钩子可接收跳转页面的参数
onLoad: function (options) {
console.log(options)
},
当跳转加入参数时可接收传入的参数
页跳转时可添加事件 一进行传递数据
wx.navigateTo({
url: 'occupations/occupations',
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
接收参数
onLoad: function () {
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('acceptDataFromOpenerPage', function (data) {
console.log(data)
})
},
收获
小程序对比angular使用起来并不是特别的方便
比如数据绑定 angular为双向绑定
小程序为单向绑定 wxml仅能获取js文件中的数据
如果需要实现双向绑定需要进行多步操作
例
在js页面设置数据
data: {
formData: [
{ title: '学历', data: ['初中以下', '高中', '大专', '本科', '硕士', '博士'], index: 3 },
{ title: '性别', data: ['男', '女'], index: 0 },
{ title: '年龄', data: ['18岁以下', '18~24岁', '25~30岁', '30岁以上'], index: 2 },
{ title: '特长', data: ['无特长', '绘画基础', '网络相关', '原型设计', '文字功底'], index: 0 },
{ title: '专业', data: ['无专业', '计算机相关', '理工科', '文科'], index: 2 },
{ title: '逻辑', data: ['渣渣', '普通', '卓越'], index: 1 },
{ title: '性别', data: ['沉默寡言', '中规中矩', '开朗活泼'], index: 1 },
{ title: '偏好', data: ['所见所得', '抽象推理'], index: 1 },
{ title: '社交', data: ['喜欢', '不喜欢'], index: 1 }
]
},
wxml页面通过wx:for循环渲染 设置自定义的data-idx属性
<view class="form-wrap">
<view class="header-1">试试什么职业最适合你</view>
<view wx:for="{{formData}}" wx:key="key" class="picker-group">
<view class="title">{{item.title}}：</view>
<picker bindchange="bindPickerChange" data-idx="{{index}}" value="{{item.index}}" range="{{item.data}}">
<view class="picker">
{{item.data[item.index]}}
</view>
</picker>
</view>
<button class="submit" bindtap="calculate">选好了，点击查看</button>
</view>
当pick组件数据改变时触发chang事件
console.log(e);
let idx = e.currentTarget.dataset.idx;
let index = e.detail.value;
let selector = 'formData[' + idx + '].index'
console.log(this.data.formData[idx]);
this.setData({
// formData[idx].index: index;
[selector]: index
})
事件返回的数据
通过获取返回数据中的自定义属性确认索引号来改变数据
wxml绑定的事件也无法通过之前学习的方式传参 Fn(params)
同样是通过设置自定义属性
通过返回的数据来进行传递参数
返回列表
评论