一、小程序基本概念
1、开发工具：为了配合小程序开发，微信专门配备了自己的开发工具，自行选择对应版本安装。
2、创建项目应用：安装完成后，打开并扫码登录。小程序发布需要企业级的认证公众号，所以个人订阅号是不能发布的。所以我这里选择无AppID，创建项目选择一个本地空文件夹，勾选创建quick start 项目生成一个demo。
3、编写小程序：demo初始化并包含了一些简单的代码文件，其中app.js、app.json、app.wxss 这三个是必不可少的，小程序会读取这些文件初始化实例。
app.js是小程序的初始化脚本，可以在这个文件中监听小程序的生命周期，申请全局变量和调用API等
app.json是对小程序的全局配置，pages设置页面路径组成（默认第一条为首页），window设置默认页面的窗口表现等
app.wxss 是整个小程序的公共样式表。类似网站开发中的common.css
4、创建页面：在pages目录下，由一个文件夹中的四个同名不同类型文件组成。.js是脚本文件，.json是配置文件，.wxss是样式表文件，.wxml是页面结构文件，其中json和wxss文件为非必须（默认会继承app的json和wxss默认设置）。
二、小程序的框架
1、小程序的配置
app.json主要分为五个部分：pages：页面组，window：框架样式（状态栏、导航条、标题、窗口背景色），tabBar：底部菜单，networkTimeout：网络超时设置，debug：开启debug模式
page.json针对页面单独设置，层叠掉app.json的全局设置
//app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"white"
}
}
2、小程序的逻辑
使用App()来注册一个小程序，必须在app.js中注册，且不能注册多个
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
使用Page()注册一个页面，在每个页面的js文件中注册
Page({
data: {text: "This is page data."},//页面数据，用来维护视图，json格式
onLoad: function(options) { },//监听加载
onReady: function() { },//监听初次渲染完成
onShow: function() { },//监听显示
onHide: function() { },//监听隐藏
onUnload: function() { },//监听卸载
onPullDownRefresh: function() { },//监听下拉
onReachBottom: function() { },//监听上拉触底
onShareAppMessage: function () { },//监听右上角分享
//如下为自定义的事件处理函数（视图中绑定的）
viewTap: function() {//setData设置data值，同时将更新视图
this.setData({text: 'Set some data for updating view.'})
}
})
3、小程序的视图与事件绑定
在每个页面中的wxml文件中，对页面js中data进行数据绑定，以及自定义事件绑定
<!--{{}}绑定data中的指定数据并渲染到视图-->
<view class="title">{{text}}</view>
<!--wx:for获取数组数据进行循环渲染，item为数组的每项-->
<view wx:for="{{array}}"> {{item}} </view>
<!--wx:if条件渲染-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
<!--模板-->
<template name="staffName">
<view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...template.staffA}}"></template>
<template is="staffName" data="{{...template.staffB}}"></template>
<!--bindtap指定tap事件处理函数为ViewTap-->
<view bindtap="ViewTap"> 点我点我 </view>
4、小程序的样式
在每个页面中的wxss文件中，对wxml中的结构进行样式设置，等同于css，扩展了rpx单位。其中app.wxss默认为全局样式，作用所有页面。
三、小程序实战--登录页面
1.login.wxm设计页面
<!--pages/login/login.wxml-->
<view class='container'>
<view class='header'>
<text>评教系统--学生端</text>
</view>
<form class='form' bindsubmit="formSubmit">
<view class="section">
<text class='login'>学号：</text>
<input type='number' name="no" placeholder="请输入学号" value='1635050449'/>
</view>
<view class="section">
<text class='login'>密码：</text>
<input password='true' name="pwd" placeholder="请输入密码" value='123456'/>
</view>
<view class="section">
<button type='primary' form-type="submit">登录</button>
</view>
</form>
</view>
2.login.wxss美化页面
/* pages/login/login.wxss */
.header{
width: 420rpx;
font-size: 48rpx;
}
.forrm{
width: 100%;
margin: 10rpx;
}
.section{
/* display: flex;
flex-direction:row; */
margin-top: 30rpx;
}
.login{
width: 65rpx;
margin-top: 10rpx;
margin-left: 10rpx;
font-size: 40rpx;
}
input{
width: 650rpx;
height: 80rpx;
line-height: 80rpx;
margin-top: 30rpx;
margin-left: 10rpx;
border: 2rpx solid #333;
}
button{
margin-top: 80rpx;
width: 660rpx;
height: 100rpx;
line-height: 100rpx;
margin-left: 10rpx;
}
3.login.js修饰页面
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
// no:'',
// password:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
formSubmit: function (e) {
// console.log(e.detail.value);
wx.request({
url: url, //仅为示例，并非真实的接口地址
data: {
username: e.detail.value.no,
password: e.detail.value.pwd
// username:this.data.no,
// password:this.data.password
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res);
if(res.statusCode == 200){
//访问正常
if(res.data.error == true){
wx.showToast({
title: "学号或密码输入错误，登陆失败",
icon: 'none',
duration: 2000
})
}else{
//缓存数据存储（异步）
wx.setStorage({
key: "student",
data: res.data.student
});
wx.showToast({
title: "登陆成功",
icon: 'success',
duration: 20000,
success: function (res) {
//页面跳转
wx.switchTab({
url: "../teachers/teachers"
})
}
})
}
}
}
})
}
})