微信小程序学习心得

微信小程序使用笔记

---

1. 环境搭建

开发工具：微信开发者工具，vs2013

开发环境：Windows，sqlserver数据库

---

2. 开发过程

小程序是属于公众号下的，开发前需要注册小程序，[点击注册](https://mp.weixin.qq.com/cgi-bin/wx)，如果是企业用户注册完成之后就可以通过开发者工具开始本地创建项目了，打开微信开发者工具，扫描登录，点击添加项目

项目创建完成后包含几个文件，pages指的是页面utils存放公共脚本，app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

创建页面，每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，相当于.css文件。wxml后缀的文件是页面结构文件，相当于.html文件。所有页面的引用都必在app.json中先注册。相对于样式文件，大多数的css样式小程序都有，只是css3的一些动画不怎么支持，比如css3 @keyframes 规则小程序不能支持，但是小程序在api中加入了一些动画效果，都是可以用的，具体详见 小程序API

据我所知小程序也无法设置overflow：hidden这个属性，但在.json中我们可以配置disableScroll来阻止页面滚动。关于小程序的标签样式等问题，有兴趣的同学可以去仔细看看小程序的组件章节 组件

这里对于小程序的icon做一个详细的说明，小程序提供的icon非常有限

相信这些远远不够我们的需求，但是如果像制作网页一样引入我们需要的icon字体呢？小程序不支持.ttf这样的字体文件引入啊，这里我找到一个转码的处理方式，通过将.ttf转码成beas64位的css文件，直接在小程序中引入就可以了 转码地址，使用方法也很简单，将自己的.ttf或者其他字体文件上传再转码下载就可以了

注意此处的Base64 encode要选择On

3. 调试

小程序调试可以直接模拟真机，也可以通过调试项目 > 预览 > 扫码真机调试。

在调试http请求的时候，因为小程序只支持https请求，我们在开发的时候可以通过调试本地数据但不用https，就把最后一项打钩，就可以了。

补充一点，模拟真机和真机测试其实还是有一些区别的，特别是同样的配置可能安卓和苹果的效果也会不一样，建议在不同机型下都去测试一下，为了方便测试修改的页面，可以在app.json里将要测试的页面放在最前面，这样打开应用就直接进入该页面了

总结

小程序的结构模式和主流的前端框架很类似，都是数据驱动事件，数据交互都是采用json格式，数据绑定直接渲染在页面视图里面，简单易学，虽然也是刚开始不就，可能会有很多地方需要修缮的地方，但是这种即用即走的轻应用还是比较适合小功能的开发的，而且对于前端开发的童鞋来说，小程序避开了很多我们不得不面的是浏览器适配问题，也是极好的。作为程序，或者说作为app，小程序还有很多我们可以运用的地方，大家一起不断的踩坑吧！

---

欢迎添加博主微信，一起学习进步