微信小程序开发笔记和那些坑（开发篇）

        本篇文章适合有一定编程基础、刚接触微信小程序的兴趣爱好者阅读。如果您是前端工程师可以直接去看微信小程序的接口文档就会了。

        虽然微信小程序的IDE非常非常的不好用，但本人对前段开发不是很熟，为了不麻烦，就凑合用了。。。至少比文本编辑器强啊。。。

        还在开发过程中，会随时更新记录细节。

---

正文开始：

        首先说一下IDE的使用吧，打开需要输入appid及使用微信扫描登录。这个appid及开发权限需要在微信开放平台申请小程序的时候获取，包括以后的秘钥等等。如果是自己的小程序OK，如果是team需要让创建者将自己的微信ID加入到开发者里面就可以了。功能都是中文得，稍微有点开发基础都知道何时使用。微信IDE不自动保存代码，需要时长ctrl+s，当然保存的同时也会重新编译的。（这里有个flag，如果ctrl+s编译后还是有问题，点上方的编译按钮。在编译过程中请不要点击画面调试，会中断编译）

        微信小程序的开发就是前端的开发，用的是xml、css和js，只不过微信的名字是wxml、wxss以及js，代码通用。微信小程序的开发过程比较简单，涉及手机功能的东西都被封装了，不像android和ios的开发需要调用应用层各种异常的处理等等。但是越简单的东西往往可控性也不高，所以微信小程序的开发还是有许多问题的，而有些问题一旦发生是开发者无法控制的，尤其在适配环节等等，具体请跳转至《踩坑篇》。

        前端语言只在大学期间接触过，微信的前端是标签。。。但也是接受纯html标签等。这一块真没什么说的，说一下点击事件和前台xml传参吧。点击事件是用bindtap=""，参数是{{}}，例： {{locationName}} ，点击标签进入toLocationPage方法，参数是js中的locationName参数，并且值动态的随js的改变而改变。这一个用的比较多，其他的详见文档吧，小程序团队的文档做的还是挺好的，里面的示例粘过来用就行。（当然也有部分文档的示例粘过来竟然给我报错。。。也是醉了）

        对于UI方面，官方也给了很多建议和资源库，建议开发者和设计师们尽量采用微信的样式。一是因为本来微信的扁平化UI就做的很舒服的，再就是毕竟是寄生在人家上面的东西，你打开了来个支付宝风格的用户也会觉得很突兀不舒服。

        这里着重说一下js。因为我接触的js也比较少，不是很熟，如果有问题还请指出。微信js命名的方式是xxx : function(){...}，好像和前端的反了过来。微信的page里记录了js中需要的全局变量，通常在方法中调用是this.data.xxx，this就是指的此页page。但是在wx的方法体中是不能这样调用的，因为wx方法中的this指的就不是本页page了。所以如果需要在wx的方法中使用，需要在调用wx方法前声明一个变量代替page，废话不多说，show code：

Page声明变量

微信扫码

        在使用的时候即可以用变量替换this点出变量赋值，也可以使用setData的方式给多个变量赋值，上例即使用后者方式赋值。

        js导入的方式如下，后面直接用jsonUtil.xxx调用导入js方法即可。

导入js

        对前端开发人员来说，跨页的变量保存一般会使用Cookie或者Session；对java开发来说，最简单的全局变量保存的方式是给一个专门存放变量的类（这里不考虑内存等性能因素）。微信小程序我没搜到关于全局变量这一说法，它的数值的保存方式是暂存到本地：

微信获取本地变量

        具体的使用方式参考《微信官方文档》即可，这里只提供一种思路。这种数据的存储方式类似于Android中的Sharepreference，微信的官方文档有给出使用的注意问题。

        对于仅仅是跳转传值可以不使用这种方式，微信提供了跳转带参的方式，文档都有，我就不画蛇添足了。

---

        差不多这些基础，再参考官方文档的SDK，然后看运气和能力能否解决非应用端代码的bug，基本就可以做出大众化的微信小程序了。