小程序day01

最新推荐文章于 2024-08-09 10:42:44 发布

夏杨web

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量172

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_63287853/article/details/125983474

版权

这篇博客介绍了小程序的开发基础知识，从注册页面开始，深入讲解了data和生命周期的概念。接着探讨了模块化的实现，包括commonjs和es6规范。此外，还详细阐述了视图层的概述以及WXML语法，特别是数据绑定的使用，如基本绑定、属性绑定和关键词绑定。

摘要由CSDN通过智能技术生成

注册页面

Page({  })  必需

data

data:{
   变量名：变量值
}
  //1.如何获取data中的值
   console.log(this.data.num)
  //2.如何设置data中的值
  //2-1 如果你的变量不需要渲染到页面中，可以直接设置
  this.data.num++;
  //2-2  如果你的变量需要渲染到页面中，要用this.setData中方法
  this.setData({
   num: this.data.num
  })
  console.log(this.data.num)

生命周期

//data 初始化变量
 data: {
  msg: "今天周一",
  num: 0,
  b: a
 },
 //页面的生命周期
 //1-页面初始化成功触发的生命周期  只会触发一次
 onLoad() {
  console.log("onLoad")
 },
 //2-页面初次渲染完成的时候会触发 只会触发一次
 onReady() {
  console.log("onReady")
 },
 //3-页面显示的时候触发
 onShow() {
  console.log("onShow")
  console.log(a)
  // //跳转页面  普通页面的跳转  会触发onHide生命周期
  // wx.navigateTo({
  //  url: '../demo/demo',
  // })
  // //跳转页面  普通页面的跳转  会触发onUnLoad
  // wx.redirectTo({
  //  url: '../demo/demo',
  // })
 },
 //4-页面离开  存在历史记录中 点击左上角的返回按钮，可以回到上一页
 onHide() {
  console.log("onHide")
 },

 //5-页面卸载  不存在历史记录中  点击左上角的返回按钮，回到启动页面
 onUnload() {
  console.log("onUnload")
 },

 //6-下拉刷新 下拉刷新重新请求数据
 //如果想触发该方法  一定要在json文件中开启下拉刷新
 onPullDownRefresh() {
  console.log("下拉刷新")
  setTimeout(() => {
   //手动停止下拉刷新
   wx.stopPullDownRefresh({})
  }, 3000);

 },

 //7-上拉触底  加载更多数据
 //可以配置触发距离  在json文件中onReachBottomDistance
 onReachBottom() {
  console.log("上拉触底")
 },
 //8-分享给朋友
 onShareAppMessage() {},
 //9-分享到朋友圈
 onShareTimeline() {}

三、模块化

概述

将公共的代码抽离成一个单独的js文件 作为一个模块化暴露出去

commonjs规范

定义
        //commonjs规范
    // module.exports = {
    //          baseUrl,
    //          port:port
    // }

    // exports = {
    //          baseUrl
    // }
引入
    let url = require(“文件路径”)

es6规范

定义
export default{
        baseUrl:baseUrl,
        port:port
}
引入
    import url from 文件路径

四、视图层概述

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。

五、WXML语法

1.wxml概述及作用

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

2.数据绑定

基本绑定

<text>pages/wxml/wxml.wxml</text>
<!-- 数据绑定 -->
<!-- 简单的数据绑定 -->
<view>{{text}}</view>

属性绑定

<!-- 属性绑定 
                vue :class="name"
                小程序 class="{{name}}"
-->
<view class="{{ name }}"></view>

关键词绑定

<!-- 关键字运算：true和false  只要属性值为true和false 都需要加{{}}
          hidden隐藏   true隐藏 不显示  false显示
-->
<view hidden="{{true}}">君不见黄河之水天上来</view>
<view hidden="{{false}}">将进酒</view>

基本运算

<!-- 算术运算 -->
<view>{{ 1+1+'1' }}</view>
<view>{{num + "123"}}</view>
<view>{{ "hello world " + '小程序'}}</view>
<!-- 三目运算 条件?true执行的代码:false执行的代码 -->
<view>{{ num>=100 ?"满分":"需要再努力" }}</view>
<!-- num大于100 class名字为box 否则不加class -->
<view class="{{num>100?'box':''}}"></view>
<!-- 路径运算：如何渲染数组中和对象中的值 -->
<view>{{arr[1]}}</view>
<view>{{obj.city}}</view>