一、小程序基本概念
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" }) } }) } } } }) } })