微信小程序可以说现在非常的火热,从刚开始的跳一跳,到现在各种各种各样的小程序深受大家的关注,它可以制作简易游戏,也可以是一种工具,总之现在的小程序种类很多,作为程序员我们也得跟进潮流,开发一个属于自己的小程序。
首先我们需要注册一个小程序,在微信小程序官网下载开发工具,这个开发工具需要appid,appid需要登录微信公众平台在设置里获取,这样就可以使用工具了,在这里面可以设置窗口颜色,和导航颜色:
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/flex/flex", "pages/teacher/teacher", "pages/testpaper/testpaper" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#5f9ea0", "navigationBarTitleText": "我的小程序", "navigationBarTextStyle": "#ccc" } }
这和我们学的html相似但又不同,之前我们用的div在这里都不可以用 ,用view代替,还有之前的浮动在这里都不能用,我们可以参考文档里的组件。
接下来给大家介绍一个登录界面的设计,
新建一大个login文件,然后新建page,这时候就自动生成四个文件,
在login.wxml是主页面,
<!--logs.wxml--> <view class="form1"> <view class='title'> 评教系统——学生端 </view> <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section"> <view class="section__title">学号:</view> <input type="input" value="1635050216" name="no" placeholder="请填写学号" /> </view> <view class="section"> <view class="section__title">密码:</view> <input type="password" value="123456" name="pwd" placeholder="请填写密码" /> </view> <view class="sub"> <button type="primary" formType="submit">登录</button> </view> </form> </view>
login.wxss是样式表
.form1 { height:4700px; display: flex; flex-direction: column; padding: 40rpx; background:#f0ffff; } .title{ margin: 0 auto; } .log-item { margin: 10rpx; } input{ border:1px solid #ccc; padding: 3px; } .section{ margin: 30px; } .sub{ margin-top: 10px; width: 250px; margin: 0 auto; }
login.js是js文件
//logs.js const util = require('../../utils/util.js') Page({ formSubmit: function (e) { console.log(e.detail.value); wx.request({ url: '', data: { username: e.detail.value.no, password: e.detail.value.pwd, }, header: { 'content-type': 'application/json' }, success: function (res) { console.log(res.data); //缓存 wx.setStorage({ key:"student", data:res.data }); //页面跳转 wx.redirectTo({ url: "../teacher/teacher" }) } }) } })
以上就是给大家介绍的小程序的注册和一个登录界面的设计,有兴趣的同学可以自己去设计一下。