界面开发

使用自己的AppID在开发者工具中创建一个项目

image.png

<small>如果不打算上线，只是纯粹练练手，可以选择无AppID</small>
开发者工具界面介绍
设备选择区：可以选择各种设备展示样式

image.png

Console：和浏览器上的命令终端一样，可以在此输入代码查看结果

image.png
Sources：和浏览器的sources一样，显示项目文件
image.png
Network：与浏览器一致，可以在此查看网络请求的结果
image.png

Storage：可以将一些数据存在这里

image.png
AppData:直观展示了程序运行中各数据的值
image.png
Wxml：即当前页面的html
image.png
编写代码
点击开发者工具左侧的“编辑”按钮，我们就可以看到整个项目的代码，其中的框架已经自动生成了。最主要的文件就是app.js、app.json、app.wxss。如果不习惯微信开发者工具的编辑器，可以用其他编辑器打开本地文件进行编辑，然后在开发者工具看运行查看效果。
app.json：项目的配置文件
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/userMeta/user",
"pages/update/update"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
<small>pages中配置所有页面的路径
windows中配置的是窗口的样式</small>
app.wxml：全局样式文件，类似于css
/app.wxss/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
<small>每个页面都可以单独创建样式文件，这些样式文件的作用范围只针对于它们的同名js文件</small>
app.js：全局的js代码，包括一些生命周期
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
onShow: function () {
console.log("App生命周期函数——onShow函数");
},
onHide: function () {
console.log("App生命周期函数——onHide函数");
},
onError: function (msg) {
console.log("App生命周期函数——onError函数");
}
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
<small>
onLaunch：当小程序初始化完成时触发
onShow：当小程序启动，或从后台进入前台是触发
onHide：当小程序从前台进入后台时触发
onError：当小程序发生脚本错误，或api调用错误时触发
getUserInfo：自定义的一些函数，可以被调用
globalData：用于存储数据的对象
</small>
其他页面：写法与全局文件类似，都可以有json文件、js文件和Wxml文件，下面是index页面代码展示
index.js
//index.js
//获取应用实例
import service from '../../services/service';
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
inputValue: null
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
bindKeyInput: function(e) {
this.setData({
inputValue: e.detail.value
})
},
submit: function() {
wx.navigateTo({
url: '../userMeta/user?id=' + this.data.inputValue
})
},
updateClick: function() {
wx.navigateTo({
url: '../update/update'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
index.wxml

<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<view class="search">
<input placeholder="请输入用户id" bindinput="bindKeyInput" />
<button class="button" bindtap="submit">搜索</button>
</view>
<view class="change">
<button class="add">添加用户信息</button>
<button class="update" bindtap="updateClick">更新用户信息</button>
</view>
</view>
index.wxml
/index.wxss/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
```
 .userinfo-avatar {
   width: 128rpx;
   height: 128rpx;
   margin: 20rpx;
   border-radius: 50%;
 }

 .userinfo-nickname {
   color: #aaa;
 }

 .usermotto {
   margin-top: 200px;
 }

 .search {
   margin: 1rem;
 }
 .search input {
   width:70%;
   float:left;
   height:2rem;
   line-height:2rem;
    background-color:#999999;

 }
 .search .button {
   width: 27%;
   float: right;
   height: 100%;
   line-height: 2rem;
 }
```