一个菜鸟(老yin逼)教后端的你如何"一天"作好微信小程序

前言

万事开头难，小程序也不例外。慕课网那个小程序课程微信小程序入门与实战 ，说实话，那时候刚出我就买了，然而我一个作后端从提不起兴趣静下心看。自从微信公开课说能够真机调试，我煞费苦心乱琢磨作，看文档，画葫芦画瓢，终于作一个小程序并上传并且审核成功了。那么我是如何教你们一天作好小程序呢？听我一一道来。

---

首先，贴上个人小程序嘛，以便作装逼凭证

---

小程序准备环境

1. 开发工具，去官网下载开发工具这是必备的！
2. 既然是小程序，它实际上是一个前端的东西，我须要你会作后端的接口。
3. 准备好后端接口，毕竟小程序也只负责链接传输数据。
4. 若是你要发布，你必需要弄https,如今https也很简单，去阿里云的CA证书免费搞一个

---

怎么作好微信小程序界面

对于全部初遇小程序的小伙伴们，想作好小程序的第一步，那就是界面。对于任何后端来讲(大部分)，对javascript，Html，CSS都大概了解，看得懂，会用一点，基本语法怎么用都略知一二，可是要你作一个完整的前端完整的页面呢？从0开始写？nonono，一个良好优秀的咱们，不会这么作，咱们也不会。对于web应用来讲，咱们能够套用模板，用框架，用layui,用拼图CSS等等一点点就能够凑成一个还算能够的网页，甚至咱们能够去copy别人页面来作本身页面(不要脸啊哈哈哈哈)

没错！我就是要教大家这么作哇啊哈哈哈哈，真他妈爽。
一点点打代码是不可能的，这辈子都不可能一点点打代码的，只有copy和借鉴才能够维持的了生活这样子。

首选，咱们要去下载一个CSS库(WXSS),而后导入咱们的样式。

注意事项：
wxss就是web的css
js仍是js
web是html，小程序是wxml
*json后缀我也不知道，还不须要用。不过看官方示例好像是配置。咱们通常不用就留{}放在那

微信有一个专门为方便前端用的框架来增长用户对微信的体验度，相信你们都知道，就是weui------>weui的Github，
咱们最好在新建项目上用官方的Demo进行修改和参考，能够省不少事。具体最好还要参考文档。若是你跟我说文档好难哦。拜托，这对于咱们后端要看什么Spring源码Struts2源码啥的简单多了！（表示都不会看只会用）

weui的使用和咱们用CSS库同样，只是咱们要知道咱们的盒子容器div在小程序是view，给他赋予class就能够呈现出咱们的样式了，好比来个九宫格：

<view class="weui-grids">



<!--兄弟，复制出这个9个就是一个九宫格了，空格都给你打好了-->
    <view class="weui-grid" hover-class="weui-grid_active" bindtap="getImageTranlate" data-index="0" >
      <image class="weui-grid__icon" src="图片路径”
      />
      <view class="weui-grid__label">身份证识别</view>
    </view>


<view>

更多使用能够在github查看官方案例，一点一点拼凑，很简单的。还有一点就是要引入库，如何引入库呢？
咱们要去github下载咱们须要的CSS，会不会去找？我仍是给你贴上吧大爷！
过来大爷，点进去把CSS样式复制了
既然这个库你们都要引用，而后要在根目录让你们方便引用咯。因此咱们要在根目录引用它。

<!--而后在你的页面的CSS上放这个，固然这是相对路径，要看你的路径了。语法就是这么写。-->
@import '../../weiui.wxss';

这样咱们的样式基本东凑西凑就搞定了。

---

如何让小程序动态起来

咱们在web上的话，就能够用javascript同样用document.get什么鬼的就可让界面改变，而后链接后端，让界面的数据随着与后端数据的传输改变。固然啦，小程序是不能够这样子的。由于小程序没有DOM节点，这不知道是优势仍是缺点。固然，咱们有另一种方法。就是微信给咱们提供的setData。
这东西很烦人，我在网上查阅的时候，好像看到这玩意一直在更新，更新了就不能用了，还要换种写法才能够。抱着乱试乱改，终究仍是写出来了。可能不是很规范。之因此以前不学小程序也是由于这个，一直在改不稳定。等稳定差很少再来学。

<!--在js文件上第一句给我写这个，不要问我为何，官方示例-->
<!--获取应用实例-->
var app = getApp()
Page({
  data: {
    
  },
});
<!--在官方示例里，大家确定都会看到这个。不懂不要乱删示例里面的谢谢。-->
<!--这个就好像咱们web端的全局变量同样，可是这是在客户端的全局变量，页面的数据能够绑定在这里给页面显示，反之这里数据一改变，页面的数据也就跟着改变。因此咱们的难点就是如何改动这个data。-->

data里面应该怎么写呢？我随便举个例子，好比我要弄个对象就是

Page({
  data: {
        result: "我是楠尼玛",
  },
});

而后去wxml里面写{{result}} 页面就有个我是楠尼玛。你要问我为何，画葫芦画瓢不会啊！不过据说微信的语法是ES6什么的，虽然我不懂。

那咱们怎么去修改这个data里面的数据呢，要是里面不少个数据要怎么修改呢？

<!--在其余函数里面咱们要修改的话应该这么写-->
var that = this    //必须
 that.setData({
        result: "这么巧啊我也是"
      })

我记得没错的话能够直接this.setData，可是必需要对象并且有时候要点两次才反应。

至于上传文件什么呀，点击事件呀，文档写的实在太清楚了。我也不细说了。基本这功能去文档复制改一改就能够用了。而后接上本身的接口返回数据就行啦。

还有一些好心的给源代码的，样式基本跟web同样能够扣过来直接用。只要你看的懂就行。并且好像有一些网页能够在线制做而后下载下来就能够直接拿来当样式了。