1.在开始小程序运行之前先要下载开发者工具,根据电脑版本有不同的选择。
2.再申请一个qq邮箱,来注册小程序
3.下载之后再配置环境,配一个有效的域名。
4.写一个显示的页面。代码如下
<view class='content' wx:for="{{teachers}}"> <view class='top'> <view class='left'> <image src='../../images/1.jpg'></image> </view> <view class='right'> <view>姓名:{{item.teachername}}</view> <view>任课:{{item.course}}</view> <navigator open-type="navigate" url=''>留言</navigator> <navigator open-type="navigate" url="../testpaper/testpaper?teacherid={{item.teacherid}}">评教</navigator> </view> </view> </view>
.top{ width: 90%; height: 270rpx; border: 2rpx solid #ccc; margin: 30rpx; } .left{ width: 200rpx; height: 200rpx; border: 2rpx solid #ccc; margin-top: 20rpx; margin-left: 20rpx; float: left; } .right{ width: 400rpx; height: 200rpx; /* border: 2rpx solid #ccc; */ margin-top: 20rpx; margin-left: 20rpx; float: left; } navigator{ margin-right: 40rpx; margin-top: 30rpx; float: left; width: 150rpx; height: 80rpx; line-height: 80rpx; text-align: center; border: 2rpx solid #ccc; background-color: #7CCD7C; border-radius: 10rpx; } image{ width: 197rpx; height: 197rpx; /* border-radius: 60rpx; */ }5.在js onload中写代码
onLoad: function (options) { var that=this; var url ="https://www.lishuming.top/pj/index.php/student/api/teachers"; //读取缓存 var student=wx.getStorageSync('student'); var classid=student.classid; console.log(classid); wx.request({ url:url, //仅为示例,并非真实的接口地址 data: { classid:classid }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data); that.setData({teachers:res.data}); } }) },同时data中要传入一个为空的数据
data: { teachers:null },要把得到的数据传入data中有两种方法(1)在onload function中定义一个that让that等于this在success:function中显示
var that=this; success: function(res) { console.log(res.data); that.setData({teachers:res.data}); } })(2)用箭头函数
success: (res)=> { console.log(res.data); that.setData({teachers:res.data}); } })