微信小程序 pages目录可以修改吗微信小程序pagepath

转载

mob6454cc6ccc8a 2024-07-24 07:40:43

文章标签 微信小程序 pages目录可以修改吗微信小程序小程序前端生命周期 文章分类 架构后端开发

微信小程序的开发（一）

创建项目

微信小程序 pages目录可以修改吗微信小程序pagepath_微信小程序

这里的AppID就在微信公众平台注册一个小程序就有了

后端服务可以选择使用微信云开发，如果有能力搭建自己的后端也可以选择不使用云服务。

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

微信小程序 pages目录可以修改吗微信小程序pagepath_小程序_02

配置

更具体的可以参考这里小程序配置

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

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 就是路径，然后可以设置文字和图标

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

微信小程序 pages目录可以修改吗微信小程序pagepath_微信小程序 pages目录可以修改吗_03

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

"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>

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

微信小程序 pages目录可以修改吗微信小程序pagepath_小程序_04

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对象，然后有一些默认的函数，至于是干嘛的，相信生成的注释已经解释的很清楚了，这里在贴个图

微信小程序 pages目录可以修改吗微信小程序pagepath_微信小程序 pages目录可以修改吗_05