微信小程序记录v1.0

No.2

最近在学习繁体输入法中的注音输入法，和拼音转换的时候会有一些词转不过来，比如熊（xiong），需要用搜索引擎。网上有关注音输入法和拼音的转换资料只有那么几套，大概这个东西是比较基础的东西（晕）。于是就自己写了一个智能的小程序，下文贴上码。

从构思到实现花了大概13个小时，一部分时间花在了搞懂微信小程序架构，一部分时间花在搞懂代码标准，一部分时间花在了图像处理上，还有一部分时间花在了工程性问题上。还有一部分时间花在了和IDE做斗争上，虽然官方IDE还是比较好用的，但是给的字太小、宽度太宽了，没有外接屏边查API变写整个人都要瞎了。。。

记录一下这次些小程序过程中对其的理解。

主要分为几个部分：

• 文件组成
• 解决的问题
• 未解决的问题

---

文件组成

• js文件
• json文件
• wxml文件
• wxss文件

js文件是javascript文件
jason文件是json文件
wxml是微信的编码格式，类似html
wxss也是微信独有的编码格式，类似css

JS文件
js文件主要是写如何处理前端传递的函数和值。每个index.js文件都是由一整个page()构成。下面分析一下一些常见的代码形式。
1. data：data里面定义的变量可以接受从页面传递的值，在这里定义的data值可以作为当前页面的全局变量。
2. bindViewTap：事实上这个名称是wxml里定义的bindtap属性的value，在function可以定义相关事件。
3. onLoad：是page中的一种状态，onLoad表示的是当前页面刷新一次时，所进行的操作。

Page({
  data: {
    motto: 'Hello',
    userInfo: {}
  },
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
   onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

常用的操作都可以在微信官方给的API里找到，就不详细写了。

JSON文件
没怎么用到这个文件。但是如果有js文件新建的时候，记得要在app.json里注册

WXML文件
其实和HTML差不多，有些常用的属性不大一样。

WXSS文件
其实和CSS差不多，有些定义搞的还不是很清楚，遇到了一些奇怪的问题。比如在一个整个的view里定义了背景图片的属性，但在其他class里定义其他image属性的时候，背景图片的显示也改变了。虽然最后用绝对位置解决了这个问题，但依然没有搞明白怎么回事，十分玄学。。。

解决的问题

1. 背景图片URL不能放本地地址，可以放网上的地址，不然调试时虽然没有问题，但手机上预览显示不出来；
2. 图像显示时，可以直接把图像值设为null；
3. 在函数里写setData()最好只写一个，不然容易造成混乱。

未解决的问题

1. 没有解决监视软件盘回车键的问题，只能实现点击button表示确认；
2. 没有搞懂如何监视小程序界面已关闭，或者已经不在当前页面；
3. 如果用setInterval()函数，用什么判断条件可以解决推出程序或后函数关闭（目前只用getCurrentPages实现了返回页面时可以关闭此函数，但无法捕捉关闭页面的动态）；

有用函数

setInterval(function () {})
setTimeOut(function () {})

---

这次收获主要是学了一些js的编程，捡起了一些css和html，以及了解了小程序的简单架构。

---

另外吐槽一下微信审核好慢啊！

---

按时下班两个月的我，昨天又见到锁门了的周楼了，果然没兴趣不成活啊！

---

最后给Hebe Tien比心吧！

---