移动端程序员快速入手小程序开发

要求对JavaScript、CSS、HTML有一定的认识（白话：有编程基础，看一下js以及css语法）；小程序逻辑是通过JavaScript编写，页面是通过类似于HTML的wxml编写，样式是通过wxss编写。

新建一个项目（如下图）

BB481FB6-13E4-4D7E-9BE0-3EEF4DFD4ECD.png

首先快速了解一下小程序的目录结构（小程序官方文档拿的）

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件 必需 作用
app.js 是 小程序逻辑
app.json 是 小程序公共配置
app.wxss 否 小程序公共样式表
一个小程序页面由四个文件组成，分别是：

文件类型 必需 作用
js 是 页面逻辑
wxml 是 页面结构
json 否 页面配置
wxss 否 页面样式表

接下来从一个简单的小功能来看小程序的开发流程
小程序的入口姑且认为是全局配置的app.js 像Android（AndroidMainifest.xml）或者是iOS（main.m）有一个入口文件。
小程序的第一个页面我们可以在app.js里面这么设置：

onLaunch: function () {
    wx.reLaunch({
      url: "pages/login/login",
    })
},

如果没有配置那么将是默认的app.json里面的pages的第一个页面。
有了第一个页面后，先往里面写一点东西（登录页面）
上面说到页面结构是在wxml里面设置，来到login.wxml
这个是一个控件
这是一个image控件
message是.js文件里面的变量引用（双大括号）
登录一个绑定是点击事件（SubmitForm）的按钮

来到.js文件，实现SubmitForm按钮的点击事件

// 点击“下一步”按钮
SubmitForm() {
    wx.redirectTo({
        url: '../user/user'
    })
}

来到.wxss文件，页面布局样式

.contant_top button {
    width: 92%; // 宽度比例
    margin: 10px auto;//间距
    border-radius: 20px;//圆角
    color: #fff !important;//颜色
    background: #1098ec;//背景颜色
    border: 1px solid #1098ec;//边框
    line-height: 25px;
    padding: 6px 12px;
    font-size: 15px;
}

这个就是css一样的。知道width,height基本够布局了，不懂的看看菜鸟教学的css。

//获取应用实例
const app = getApp();
这个可以获取到全局的app有点像ios的全局AppDelegate

跳转到其他页面（其他页面跳转方式看小程序关于路由文档https://developers.weixin.qq.com/miniprogram/dev/api/route/）

数据缓存：（https://developers.weixin.qq.com/miniprogram/dev/api/storage）

网络请求：（https://developers.weixin.qq.com/miniprogram/dev/api/network/request）

注意点：
在闭包中不要直接使用this : const _this = this

好了介绍这里吧，学会看文档很重要，然后去踩一遍坑，差不多就可以出去说小程序开发是真TM简单
最后吐槽小程序开发工具是真的坑！