2--开始第一个小程序之旅

xiaodai8580 5年前 (2021-04-28) 716℃ 0次吐槽

新建页面的步骤

1.右键新建page生成页面的框架

微信小程序快速创建页面自动生成文件，方法：

在左侧目录处右键-新建目录-（在新建成功的文件夹中）右键-新建page 就ok！！

（1）右键--新建目录

（2）在新建成功的文件夹中，右键--新建page

会自动，生成4个文件，如下所示：

2.在app.json中的pages添加我们新建页面的路径（下图的路径，是创建生成微信小程序页面4个文件的同时，在app.json文件中自动生成的页面路径）

如果手动，将某个页面删除掉，在app.json中，我们需要把对应的路径给删除掉。这里不会因为你手动删除，而自动删除这里的路径。（一定要到这里手动去删除路径！！！）

-----------------------

小程序生命周期和页面声明周期

小程序的生命周期函数:

小程序的生命周期函数是在app.js里面调用的，App(Object)函数用来注册一个小程序。

接受一个 Object 参数，指定其小程序的生命周期回调

一般有onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。

小程序的生命周期函数的调用顺序为：onLaunch>onShow>onHide

页面生命周期函数:

页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数。

Page(Object) 函数用来注册一个页面。接受一个Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

熟悉掌握--小程序生命周期运行顺序

小程序启动时先执行onlauch>onshow>onHide,

然后再执行页面onload>onshow>onready>onhide>onunload

小程序生命周期

onlauch

onshow

onhide

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

App({
onLaunch(){
console.log('onLaounch监听小程序初始化')
},
onShow(){
console.log('onShow监听先程序显示')
},
onHide(){
console.log('onHide监听小程序隐藏')
},
onError(msg){
console.log(msg)
},
globaData:'我是全局数据'
})

从上演示，我们可以知道小程序的生命周期函数的调用顺序为：onLaunch>onShow>onHide

小程序页面生命周期

onload

onshow

onready

onhide

onunload

在pages中的index页面中设置生命周期函数

Page({

/**
   * 页面的初始数据
   */
data: {

},

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
console.log('onLoad监听页面加载')
},

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {
console.log('onReady监听页面初次渲染完成')
},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
console.log('onShow监听页面显示')
},

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
console.log('onHide监听页面隐藏')
},

点击，调试器或者可视化，然后页面初次加载渲染

显示生命周期函数执行顺序如下所示：

总结：

小程序程序生命周期函数和页面生命周期函数的调用顺序，

这两者之间的事件顺序一般如上图所示小程序周期函数在前，页面周期函数触发在后。

但是这并不是绝对的，

比如，有时候就会存在页面onLoad函数比小程序app的onLaunch生命周期函数先调用的情况，那么这时候就可以用回调的方式的来处理。

-----------------------

小程序的自适应尺寸单位rpx

rpx单位：是可以根据屏幕宽度进行自适应

尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。如在iphone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。

-----------------------

小程序的app.json和子页面头部配置信息

微信小程序单个页面的json文件的配置信息覆盖 app.json的配置信息

因为

子页面中的xx.json 的优先级高于根目录的app.json

例如：

在“我的”页面中的my.json文件中配置：

{
"navigationBarTitleText": "我的"
}

在“预约”页面中的yuyue.json文件中配置：

{
"navigationBarTitleText": "预约"
}

显示效果如下所示：

如果出现“微信小程序单个页面的json文件无法覆盖app.json的问题”？

解决方法：

用的版本是默认的2.0.4版本，换成2.4.3版本，即可解决！！

操作如下所示：

-----------------------

微信小程序---去掉顶部导航栏

在app.json中的"window": {}添加

"navigationStyle": "custom"

"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FEDA22",
"navigationBarTitleText": "学车教练预约",
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
},

显示效果如下所示：

-----------------------

小程序的使用flex弹性布局

在父容器上加display:flex,

.sort_box{

flex-direction:row;

margin:0 30rpx;

justify-content:space-aound;

}

wxml：

<view class="flex-wrp" style="flex-direction: row;">
    <view class="flex-item demo-text-1">1</view>
    <view  class="flex-item demo-text-2">2</view>
    <view  class="flex-item demo-text-3">3</view>
</view>

<view class="flex-wrp" style="flex-direction: row;">
    <text class="flex-item demo-text-1"> 内容一 </text>
    <text class="flex-item demo-text-2"> 内容二 </text>
    <text class="flex-item demo-text-3"> 内容三 </text>
</view>

<view class="flex-wrp" style="flex-direction: row;">
    <image class="flex-item" src="../../images/w/w1.jpg"></image>
    <image class="flex-item" src="../../images/w/w2.jpg"></image>
    <image class="flex-item" src="../../images/w/w3.jpg"></image>
</view>

<view class="flex-wrp" style="flex-direction: column;">
    <view class="flex-item demo-text-1">1</view>
    <view  class="flex-item demo-text-2">2</view>
    <view  class="flex-item demo-text-3">3</view>
</view>

wxss:

.flex-wrp{
    margin-top: 60rpx;
    height: 300rpx;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-item{
    width: 200rpx;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo-text-1{
    color: #fff;
    font-size: 36rpx;
    background-color: #1AAD19;
}
.demo-text-2{
    color: #fff;
    font-size: 36rpx;
    background-color: #2782D7;
}
.demo-text-3{
    color: #fff;
    font-size: 36rpx;
    background-color: #ccc;

}

预览效果如下所示：

其中，父元素设置

项目位于容器的中心

justify-content: center;