要求对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
<view class='phone'></view>这个是一个控件
<image style='width:220px; height:60px;' src='../../img/tea.png'></image> 这是一个image控件
<view class="message" wx:if="{{message}}"></view> message是.js文件里面的变量引用（双大括号）
<button id="phoneNext" bindtap='SubmitForm'>登录</button>一个绑定是点击事件（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简单
最后吐槽小程序开发工具是真的坑！
网友评论