发表于: 2020-03-26 23:55:09

1 1526


今天完成的事

1,之前使用了服务做中转,让列表展示组件与分页组件可以相互分享数据,但是之外的数据发送受阻;于是新定义了一种数据分享的方式:

结果运行后包含列表展示组件和分页组件无法加载成功,随后删除了该方式,暂时放弃分页组件向列表展示组件发送其页码变化数据:

2,注册微信个人小程序开发账号,获取AppID,并下载微信小程序开发工具进行开发;

3,学习了小程序框架,组件相关的概念后,构建一个简单的界面:

(1)新建一个准备开发的文件,包含后缀名有 .wxml ,  .wxss ,  .js的三个文件:

(2)在app.json添加该文件为配置的第一行:

并且还需要在js文件中添加Page();避免编译后报错找不到该新新建的文件;

(3)在choose.wxml中添加picker组件,并添加相应的数据数组:

picker组件:

<view class="section">
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{education}}">
    <view class="picker">
      学历:{{education[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{sex}}">
    <view class="picker">
      性别:{{sex[index]}}
    </view>
  </picker>
</view>

定义的数据以及方法:

Page({
  data: {
    education: ['大专', '本科', '硕士', '博士'],
    sex: ['', ''],
    age: ['18 ~ 24岁', '25 ~ 30岁'],
    basics: ['零基础', '会一点', '熟练'],
    profession: ['理工科', '文科'],
    ability: ['很渣', '普通', "不错"]
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
})

明天的计划

1,新增列表推荐页,根据选择得到的条件展示相应的推荐结果;

2,学习微信小程序是如何发送请求得到数据的;

遇到的问题

1,新建文件编译后加载出现not found的错误,随搜索错误,在js文件中添加了Page( )后编译无报错;

收获

1,在之前的angular学习使用中,angular通过属性绑定,事件绑定,双向绑定的方式让视图界面与逻辑层面定义的变量或方法进行绑定,小程序开发使用了双花括号{{ }}来让视图绑定逻辑中定义的数据,完成数据的动态变化;

2,虽然没有解决分页组件数据向列表展示组件分享数据,但是依旧学到了许多可供参考的多种组件之间分享数据的方式实例演示:

https://www.cnblogs.com/huangenai/p/7246651.html



返回列表 返回列表
评论

    分享到