微信小程序开发随记

先扯淡。

最近课程要求做一个实现家务骰子功能的微信小程序，网上整合的资源都比较多，主要还是参考官方文档。安装好微信小程序开发者平工具在新建项目的时候之后会有个简单的demo，看一下有助于理解。
我的开发者工具里并没有node.js服务器的demo和php版本的demo，实际官方文档里是有的，官网上下载下来的master分支上的压缩包也会报错，最后是在github上找到了这个项目看了一下。
随记内容很散，就是我在做微信小程序的时候遇到的一些小问题以及需要注意的地方。

随记一

小程序入口是从app.js开始，app.json是对应的配置文件。具体官方文档有说明，主要是注意每次新增页面都应该在app.json做相应修改。
微信小程序封装了很多常用的组件，每个组件都有很多丰富的属性可以设置。我在写的时候写了犯了一个很傻的错误，就是将text标签里还嵌套其他了标签，这是不允许。
每个页面都有对应的js，wxml，wxs文件，对应的js里面主要是给Page()传一个对象，对象包括了这个页面相关的变量、数据和函数，数据和变量又是作为data对象的属性。

Page({
  data: {
    motto: 1,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
  },
  ...methods...})

微信小程序的wxml可以支持条件渲染，就省去要多写js去获取dom元素然后根据相应值进行判断的步骤，而且wxml里可以直接获取到对应js文件中data的属性。在写条件渲染的时候就很方便的直接在标签里用wx:if=”{{..}}”的方式进行判断渲染。
现在我想实现一个功能，往输入框输入值，然后点提交的时候，已经输入的内容可以罗列在下方。这里获取输入框的输入值涉及到要向bindblur绑定一个方法，这个方法默认传入一个事件参数e，e.detail.value就是输入框里的值。获取到这个输入值之后，需要把这个值赋值给用于页面条件渲染判断的那个变量。官方赋值的办法是用this.setData()方法传入一个对象，对象内部的内容是相对于Page中data对象变化的内容。这样可以看到页面渲染确实可以根据数据进行变化。

this.setData({
    motto:"Hi"
})

在做小程序的时候遇到一个问题：我如果是直接给data里的某一项赋值，比如：

this.data.motto="Hi";

这样不会报错，利用console.log打印出来的值也确实是“Hi”，但是在实际小程序当中却没有效果。我个人对这个理解是，页面效果根据变量值改变除了要修改变量值之外，还有有其他的事件监听去触发页面重新渲染。

随记二

如果希望某一个元素在某事件触发后还能附带一些数据，可以在这个标签内使用data-变量名xxx，这样在事件对象里可以通过e.target.dataset.变量名xxx获取到你想要获得的值

然后 说一下元素背景图这个这个问题，如果在wxss里写元素背景图的话，如果是本地图片是不起作用的，只有是网络图片或者 base64；而image标签能够支持本地资源，所以没有这个问题。那如果需要用本地图片文件给某一个元素设置背景，可以在wxml中该标签写行内样式

<view style="backgournd:url('图片路径')"></view>

之前有写过，说要获得input输入内容的时候需要用到input的bindblur，在处理方法中通过e.detail.value获得输入的内容，现在已经输入了内容并添加进列表了，需要把input输入框中已有的内容清空。这里用到input的value这个属性，将value绑定一个变量，然后在添加进列表完成之后，将这个变量赋值成空字符串

//wxml
 <input class='myInput' placeholder='请在此输入家务项目' placeholder-class='placeholderStyle' bindblur='bindblurInput' id='houseworkInput' value='{{addInput}}'></input>
//js
data：{
    addInput:'' 
},
bindAddButtion:funtion(){
    ...其他处理的函数部分省略.....
    this.setData({
        addInput:''
    })
}

我有一点不太能理解，如果说输入框里的内容是与inputValue绑定在一起的话，既然可以通过这种方式来清空输入框里的值，为什么不能通过这种方式来获取输入框的值。我在输入框内有值的情况下，在自己写的bindblurInput方法中尝试console.log(this.data.addInput),打印出来结果是空的，也就是初始的值。我从此得证不能通过addInput来获取输入框的值。

可能因为我理解太浅薄，如果有错误希望能得到指正，非常感谢。
未完。