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

最新推荐文章于 2023-01-28 00:42:06 发布

转载最新推荐文章于 2023-01-28 00:42:06 发布 · 231 阅读

CC 4.0 BY-SA版权

原文链接：https://developers.weixin.qq.com/community/develop/doc/000e0e8c10c200168b7b8058759400?highLine=%25E4%25B8%258A%25E4%25BC%25A0%2520%25E6%258C%2589%25E9%2592%25AE%2520%25E7%2581%25B0%25E8%2589%25B2

文章标签：

#小程序 #前端 #javascript

Jason🐇2019-06-14

5288浏览

2评论

给学弟学妹或小白们介绍一下小程序，学习方法，和基本内容介绍

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

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

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

学习小程序的前置知识

前端使用的是微信自定义的一套规范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.用户登陆

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

彻底搞懂小程序登陆流程