成品

少啰嗦，先看东西：
我做的这个小程序叫做「生活好评助手」，大家可以使用微信搜索这个小程序名称，或者是扫下面的小程序码进行体验。

做这个东西的起因有两个，第一是有两次团建聚餐，服务员告诉我们凑齐多少个好评，就送我们饮品、小吃，这个好评不仅有个数要求，而且还有字数要求。一时间，大家竟然没有找到合适的工具。第二是虽然自己曾经做过公众号/订阅号以及小程序的相关开发，但都是后端服务，从来没有完整的实现过前端业务，本来这次做这个工具也是打算做web端的，后面想着干脆试试小程序，权当是练手了。

遇到的问题

在完成这个小东西的过程中，前前后后遇到不少的问题，记录一下，分享给大家。

开发层面的

首先，虽然本质上小程序最终也是运行在浏览器内核中的，但是在开发规范和约束上面，就有许多的不同。比如，不能直接使用浏览器的如window、document、history、fetch、XMLHttpRequest等原生对象或属性，需要使用微信官方提供的类库，比如发起请求是wx.request({})，操作本地存储是wx.getStorageSync()等等。
其次，工程目录结构需要遵守微信的规范，比如页面文件需要遵守如下规范：

pages
├── customer
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
├── index
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
├── overview
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
└── tools.wxs

其中.js是业务逻辑代码，.wxml是渲染层代码，可以理解为是传统的html代码，.wxss是样式代码，可以理解为传统的css文件（外部样式）。
这其中有一个相对友好的的地方：如果你熟悉Vue或React，那么你上手就会比较容易，当然熟悉Vue更佳。它的数据绑定，条件渲染甚至是插槽等等都会让你倍感亲切。
第三，引用第三方组件，当我查阅微信小程序开发文档相关文章的时候，才发现，现在可真是处在了一个好时候，看其他开发者留言讲的，以前都是要手动拷贝源码，然后再引入...现在只需要按照一定的步骤，借助它的开发工具，编译引入即可。
第四，由于它的解析渲染机制的缘故，无法实现在Vue中类似这样的行为：

# sentence是一个字符串变量，而slice是内置方法
<div>{{ sentence.slice(0, 10) }}</div>

这个时候需要支持这样的功能，你需要使用它的WXS模块，WXS 语法参考 /模块，最终实现的方案是：

<wxs src="../tools.wxs" module="tools"></wxs>
<view class="text-gray text-sm">
   {{tools.stringFunc.overflowHidden(content, 15, '...')}}  
</view>

tools.wxs的内容如下：

// pages/tools.wxs

var tools = {
  string: {
    overflowHidden: function(str, length, letter) {
      if (!str || str.length <= length) { return str }
      return str.slice(0, length) + (letter ? letter : '...')
    }
  }
}

module.exports = {
  stringFunc: tools.string
}

看上去是不是有些许繁琐呢？

开发层面的暂时就啰嗦这么多吧，以后想到了再补充。

资质/审核层面的

由于是在微信的体系下，免不了各种的条条框框，例如，小程序的名称、简称、Logo、描述等等需要审核。其次就是备案，域名备案、小程序备案等等。

另外，你们可以看到我这个小程序是个人资质，因此能做的事情非常少，已经把功能砍到只留下了一个😭。

收获

最后，在磕磕绊绊之后，最终还是把它完成上线了。收获还是蛮多的，技术层面就不再赘述了，对我来说，更有意义的收获是从无到有完整的经历了一个小程序的从开发到资质审核再到发布这一系列的流程。
Enjoy it. 🍻😊

---