写给学弟学妹的学习小程序经验总结

此篇文章面向前端入门以及小程序新手，入门爬坑可以观看

我个人跟着教程写过一个电影小程序，然后就直接开始写比赛的小程序了，对小程序有一定认识，但理解还是比较浅的，如有错误欢迎批评指正。

学习小程序的前置知识

• 前端使用的是微信自定义的一套规范wxml+wxss+json+js,其本质还是html+css+javascript.打好基础才能快速学好框架。

• 编译器推荐：VS Code,有非常多的插件，代码补全，格式修正，颜色高亮，版本控制

• 推荐网站：MDN有标准语法文档方法函数忘记了可以去这个网站查，freecodecamp编程闯关、完成挑战

• 第一阶段：html，css，推荐书籍：Head First HTML与CSS（第2版）HTML5权威指南 CSS揭秘 CSS世界可以边看书或者视频边写代码。快速熟悉网页框架结构。

• 第二阶段：JavaScript,http这一阶段基础一定要打牢，前端的绝大部分都是以javascript为基本的。推荐书籍：JavaScript DOM编程艺术 （第2版）JavaScript高级程序设计（第3版）JavaScript语言精粹ES6标准入门（第3版）深入理解ES6如果觉得难可以先看视频，再看书，中间跟着写一些小demo，学完后做一个完整的网页（学习所有知识都可以按照此路径，视频：快速了解 > 书籍：深入探究 > 实践：理解巩固）。

• 扩展知识：学一点点linux和git对合作开发有更高的效率。

• 先学会了一些框架（vue，react）可以更快地上手小程序。

  ---

小程序的学习

• 官方学习视频《学做小程序》

• 官方学习文档《小程序微信官方文档》

• 通过看文档和教学视频学习小程序

  ---

入门指导

1.申请账号

进入小程序注册页
可以在小程序后台，依次点击「设置」->「开发设置」获取到这个「AppID」自己保存：AppID相当于小程序平台的身份证

2.安装开发工具

前往 开发者工具下载页面

稳定版 Stable Build (1.02.1904090)

Windows 64 、 Windows 32 、 macOS

根据不同操作系统下载相应版本

3.创建项目

4.在VS Code中编写代码，在小程序开发者工具里调试

VS Code官网下载：code.visualstudio.com/

点击「扩展」，安装小程序插件推荐「minapp」「wxml」「wechat-snippet」,其他插件自行选择

---

文件构成

小程序一般由下面四类文件组成：

• json：配置文件

  小程序全局配置：「app.json」

   //配置页面路径
  "pages": [
  ​    "pages/index/index",
  ​    "pages/logs/logs"
    ],
  //配置窗体样式
    "window": {
  ​    "backgroundTextStyle": "light",
        //顶部导航样式
  ​    "navigationBarBackgroundColor": "#fff",
  ​    "navigationBarTitleText": "WeChat",
  ​    "navigationBarTextStyle": "black"
    },
  

  开发工具配置：「project.config.json」

  开发者工具的统一配置，界面设置以及云函数相关

  单页面配置：「page.json」

  对本页面的窗口表现进行配置，会覆盖app.json的window中相同的配置项

• wxml：模板文件，AS:HTML

  1.跟html很像，类比<div>=<view>,<p>=<text>,<a>=<navigator>等

  2.与html不同的是，可以在标签中加判断或循环语句wx:if、else/wx:for还可以使用三元运算符等

  3.在标签里使用{{motto}}可以读取当前页面JS文件data:{motto:'hello World'}data对象中的数据

  4.在标签中通过bindtap/catch="functionName"冒泡/捕获绑定事件

• wxss：样式文件，AS:CSS

  1.2rpx=1px小程序根据不同屏幕大小，底层来换算像素单位

  2.flex布局：推荐阮一峰老师的博客Flex 布局教程:语法篇 Flex 布局教程：实战篇

• js：脚本逻辑文件

  1.页面生命周期**

// pages/life.js 页面初始化时，小程序自动给我们创立了生命周期函数
Page({
  /**
   * 页面的初始数据,可以使用this.setData({ msg: "Hello World" })传入data对象wxml可以从中获取数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

很多人说this.setData（）传不进数据，有人回答在函数里先申明个var that=this,这种回答很敷衍，提问人还是不会懂，治标不治本。推荐不懂的同学去了解一下this指向原理：this 永远指向最后调用它的那个对象，多看几篇技术文章this、apply、call、bind、Javascript 深入浅出 this

2.发起http请求

//仅为示例
wx.request({
  url: 'http:'//test.php, 
  data: {
    x: '',
    y: ''
  },
     method:'GET'\'POST',
  header: {
    'content-type': 'application/json' 
  },
  success (res) {
    console.log(res.data)
  }
})

通过请求后台接口，发送获取数据

3.用户登陆

基本每个小程序都少不了登陆流程

彻底搞懂小程序登陆流程

---

个人小结

之前喜欢计算机，但是摸不到门路，大约一年前加入工作室，因为比较喜欢写完代码就看到界面交互的效果，确立了学习方向：前端。上学期入门了html,CSS ,JavaScript期间写了几个网页，巩固了一下基础.这学期写完工作室官网，刚学完ES6就开始小程序大赛了。

我们工作室是独立非学校、非盈利的计算机学习组织,主要学习互联网开发，前端后端，设计，三个方向，每周30小时学习打卡，一次学习经验分享会，让我们互相学习监督，共同成长。感谢前辈创业，学长引路，让我从单喜欢计算机到有了专业方向。

前辈传给我们，我们再教学弟学妹，我们有共同理想，共同爱好，并为之付出努力。我记得王小波在维也纳看三个青年在街头演奏的一席话：青年的动人之处，就在于勇气，和他们的远大前程。

希望能给学弟学妹们，前端刚入门者一些指导。

喜欢前端、计算机志同道合的朋友可以加WX交流学习经验：Jason-JCWu

---

更新分割线
几年前写的，目前已进入tx