微信小程序的开发（一）

创建项目

这里的AppID就在注册一个小程序就有了

然后项目的结构大概是这样子的

配置

更具体的可以参考这里

我认为比较重要的就这几个。

pages ： 设置页面路径列表 entryPagePath ： 默认展示首页 tabBar ： tab栏的表现

pages

这个一般不用去管它，当你在项目结构中新建 Page 时，会自动加入到 pages 中

tabBar

tabBar 里面有很多的属性，其中设置底部栏的是 list 属性

{
          
   
  "pagePath": "pages/home/index",
  "text": "",
  "iconPath": "images/home.png",
  "selectedIconPath": "images/home_selected.png"
}

第一个 pagePath 就是路径，然后可以设置文字和图标

比如我的只设置了图标，没有设置文字

然后一般在发布之前会有一个代码质量检测，会建议设置组件懒加载，所以会加上这个

"lazyCodeLoading": "requiredComponents"

开始动手

接下来就该写点代码进去看看效果了

wxml

在项目结构的pages文件夹中新建一个page，然后打开其中的后缀为 .wxml 的文件 一开始文件里就一个 text 标签，没错，标签, 把它当作HTML写就可以了，不过要注意的是，wxml和html中的标签有点不一样，具体的看这里

<text>/pages/home/index</text>

然后不知道为什么，键盘自己动起来了，屏幕中的文字变成了下面这样

<view>
    <view class="info-box">
        <view class="head-img">
            <image src="/images/head-img.png" mode="aspectFit"></image>
        </view>
        <view class="nickname">未登录</view>
    </view>
    <button class="login-btn" bindtap="getUserInfo" type="primary">登录</button>
</view>

点击保存，然后左边预览界面

wxss

你会魔法吧，为什么我的不是这样。 最开始的时候什么都没有，然后现在是一堆凌乱的图片和文字，或者说很整齐，都是从上到下靠左的布局。最大的缺点是图片会显得很大

这时候我们就想起了编写 html 时修改样式的css了，没错css，在小程序里对应的就是wxss，那么开始吧。

.info-box {
    background: rgb(66, 131, 190);
    height: 400rpx;
    text-align: center;
}

.head-img {
    width: 100rpx;
    height: 100rpx;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    padding: 20rpx;
    position: relative;
    top: 100rpx;
}

.head-img image {
    width: 100%;
    height: 100%;
}

.nickname {
    position: relative;
    top: 120rpx;
}

.login-btn {
    position: relative;
    top: 30rpx;
}

ctrl+s 保存后，魔法就出现了，我们的页面美化了。

等等，image标签中的mode是什么 在小程序里，每个标签都有很多的属性，具体的可以看官方文档 我们这里的 mode=“aspectFit” 表示的是保持纵横比缩放图片，使图片的长边能完全显示出来。 还有一个 mode=“aspectFill” 保持纵横比缩放图片，使图片的短边显示出来，长边将会发生裁剪 同时还有其他的选择，不过都会发生不保持比例的缩放或裁剪

js

好的，这些都有点理解了，那么 bindtap="getUserInfo" 又是干嘛的呢

这就是绑定事件了，表示当点击这个元素时将调用一次 getUserInfo 这个方法，然后我们就打开了那个后缀为 .js 的文件

Page({
          
   
    //页面的初始数据
    data: {
          
   },
    getUserInfo(e){
          
   
        console.log(e)
    }，
    //生命周期函数--监听页面加载
    onLoad(options) {
          
   },
    //生命周期函数--监听页面初次渲染完成
    onReady() {
          
   },
    //生命周期函数--监听页面显示
    onShow() {
          
   },
    //生命周期函数--监听页面隐藏
    onHide() {
          
   },
    //生命周期函数--监听页面卸载
    onUnload() {
          
   },
    //页面相关事件处理函数--监听用户下拉动作
    onPullDownRefresh() {
          
   },
    //页面上拉触底事件的处理函数
    onReachBottom() {
          
   },
    //用户点击右上角分享
    onShareAppMessage() {
          
   }
})

里面定义了一个Page对象，然后有一些默认的函数，至于是干嘛的，相信生成的注释已经解释的很清楚了，这里在贴个图

接下来在加上一个 getUserInfo 保存之后再次点击按钮

打开调试器，点击console就可以看到最下面有一个打印出来的消息，说明已经成功调用了 getUserInfo(e) 这个方法。

好了，你已经学废了，开始敲代码吧。