微信小程序学习 （一）

这两天在看微信小程序的东东，在此整理一下。

首先标明，个人用户无法申请小程序开发资格。

什么是微信小程序

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序、订阅号、服务号、企业号是并行的体系

能够实现什么

以下是自我总结出来的，如有欠缺，还请指正

1. 实现基本的表单输入提交
2. 酷炫动画展示页的开发，可查看coolsite360 （注：并非推荐其编辑器，暂时也没有做了解，主要是看其实现的作品）
3. 基于H5小游戏的开发，因为微信小程序暴露了原生的重力感应和罗盘等部分原生系统设备接口
4. 在线支付应用开发
5. 等其他应用，尚待探索，欢迎补充

学习资源

• 官方网站：包括基本接入流程，和”hello world“的入手demo程序
• w3cschool：基本copy官网的开发文档，不过看起来感觉比官网要更加流畅一些

感悟总结

IDE

官网中提供小程序编制的IDE，优缺点皆备，总结如下：

• 优点：较轻量级，但集开发，调试，结构一体化结构，调试工具与Chrome相同，习惯使用Chrome做前端开发的同学上手很快，有一般性的输入提示，界面排版简单明了
• 缺点：自身存在一些bug，例如代码过长，面板无法横滚等。调试页面的Wxml面板，最开始隐藏在最后，找了半天，才知道是在哪。只有js文件可以实现代码排版格式化，wxml和wxss文件不支持，暂未找到基于项目的全局搜索。比较适合大屏开发，直接在mac上看会感觉比较尴尬

开始项目

1. 如何申请开发资格及基本准备在 官方网站描述的很详细，在此不再赘述。

2. 项目结构以功能页面作为结构区分理念

   全局文件
   pages//单一页面目录的父目录
    - foo//文件夹
    - foo.js//实现该页面的功能逻辑文件
    - foo.wxml//页面展示结构，与H5相似，多了些自有标签
    - foo.json//单一页面的简单配置，覆盖全局配置
    - foo.wxss//单一页面的样式表，覆盖全局样式中的同名样式
   common//公用文件夹，可包含公用样式，公用逻辑功能代码
   app.js//全局逻辑文件
   app.json//全局配置文件
   app.wxss//全局样式表

3. 在app.js中包含App()函数，进行全局设置，在其他单一页面中使用getApp()获取其引用

4. 在foo.js中使用Page()函数，定义单一页面数据和交互功能

需要注意的事项

• 在Page函数绑定的数据必须是对象，否则在页面中无法进行绑定

  //正确
  Page({
    data:{
      name:'foo'
    }
  })
  //错误
  Page({
    data:'foo'
  })

• 在进行交互式必须使用setData()方法设置数据的值，进行直接赋值无效

  <!--foo.wxml-->
  <view bindtap="foo">{{fooValue}}</view>
  //foo.js
  Page({
    data:{fooValue:'hello'},
    foo:function(){
      //this.data.fooValue = 'test';//❌错误
      this.setData({//✔️正确
        fooValue:'test'
      })
    }
  })

• 在app.json中设置pages属性，其数据的顺序要和tabBar中list属性中数据的顺序保持一致，否则会报错,如有未在导航栏中的页面，则排列在最后，tarBar中有个数限制，

  "pages":[
      "pages/foo1/foo1",
      "pages/foo2/foo2",
      "pages/foo3/foo3",
      "pages/foo4/foo4",
      "pages/foo5/foo5"
    ],
    "tabBar": {
      "list": [{
        "pagePath": "pages/foo1/foo1",
        "text": "foo1"
      }, {
        "pagePath": "pages/foo2/foo2",
        "text": "foo2"
      }, {
        "pagePath": "pages/foo3/foo3",
        "text": "foo3"
      }]
    }

• 微信小程序提供模板，可以将重复使用的wxml文件写入template中，然后通过is和name属性进行调用，但是要注意的是template的内容要写在当前使用的页面文件中，否则报错

---

这两天只是简单的了解了一下小程序的开发，写了个todoList，然后就没什么想法了，如果有好的想法，欢迎共享，之后倒有些计划，列表如下

1. 结合H5游戏开发，做个小游戏
2. 结合Canvas开发个类似绘图的东东
3. 使用CSS做个酷炫的展示页

呵呵，再会，祝好