小学期微信小程序实训篇1_介绍小程序、基本目录结构及简单练习、页面基本元素及其数据渲染

目录


  • 介绍小程序
  • 基本目录结构及其练习
  • 页面基本元素
  • 配置
  • 模板语法

一、介绍小程序

小程序发展势头正足,有发展前景~

小程序的优势

  • 轻量化免注册使用
  • 背景生态
  • 方便营销

什么是云开发

  • 对前端者友好开发
  • 使用 js + node + json数据库进行基本的后端开发,不需要和传统的后端打交道

关于vscode开发环境高亮显示

  • 右下角格式类型由纯文本改为html、css

二、基本目录结构

基本目录文件

  • pages:页面文件,所必须的
  • utils
  • app.js:小程序入口文件
  • app.json:全局配置文件,页面之间的联系,配置包括标题等内容,每个pages页的json文件也可单独的设置页面标题
  • app.wxss:全局样式文件
  • project.config.json:项目配置文件

小练习,app.json


{
  "pages":[
    "pages/index/index",
    "pages/demo/demo",
    "pages/mine/mine",
    "pages/cart/cart",
    "pages/video/video",
    "pages/search/search"
  ],
  底部翻页按钮及其对应的页面
  "tabBar": {
  	按钮颜色
    "color": "#333",
    按钮选中颜色
    "selectedColor": "#FF69B4",
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "搜索",
      "iconPath": "icon/_search.png",
      "selectedIconPath": "icon/search.png"
    },
    {
      "pagePath": "pages/video/video",
      "text": "视频",
      "iconPath": "icon/_videocamera.png",
      "selectedIconPath": "icon/videocamera.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    }
    
  ]
  },
  "window":{
    "backgroundTextStyle":"light",
    内容上方颜色
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

三、页面基本元素及其数据交互

常用元素

  • view独占一行,块级元素,类似html中的div
  • text 一行多个,块级元素,类似html中的p

注意不能text不能嵌套view使用,其他具体用法参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

差值表达式,使用{{}}渲染data中的数据,数据的基本类型(js数据类型,ES5及其之前的数据类型)

  • 字符串
  • 数值类型
  • 布尔类型
  • undefined
  • null
  • Object对象
  • Array数组

练习

// pages/mine/mine.js
Page({

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

    date:"2021年4月24日16:30:20",
    // 数组,发现可以类型不同
    arr :[1,2,3,'xiaosi'],

    // 字符串
    myName:"xiaosi",


    // 对象数组
    students:[
      {
        name:'xiaosi1',
        age:'19',
        gender:'男'
      },
      {
        name:'xiaosi2',
        age:'19',
        gender:'男'
      },
      {
        name:'xiaosi3',
        age:'19',
        gender:'男'
      }
    ],
    // 对象
    star:{
      key1:"这是一个对象的属性值1",
      key2:"这是一个对象的属性值2",
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {

  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

<!--pages/mine/mine.wxml-->
<text>这是text标签内容1,类似html中的p,是行内元素</text>
<text>这是text标签内容2,类似html中的p,是行内元素</text>
<view> 这是view标签内容1,类似html中的div,是块级元素</view>
<view> 这是view标签内容2,类似html中的div,是块级元素</view>
<view>================================================</view>
<view>差值表达式的基本用法:{{date}}</view>
<view>=========下面演示基本数据类型的渲染============</view>
<view>我的名字是:(字符串){{myName}}</view>
<view>=============================================</view>
<view wx:for="{{arr}}">这是数组的渲染{{index}},按照索引取值值为:{{arr[index]}}</view>
<view wx:for="{{arr}}">这是数组的渲染{{index}},按照索引取值值为:{{item}}</view>
<view>=============================================</view>

<view>对象的数据渲染:{{star.key1}} === {{star.key2}}</view>
<view>====================================</view>
<view>对象数组的渲染:</view>
<view wx:for="{{students}}">
  <text>{{index}}==={{item.name}},</text>
  <text>{{item.age}},</text>
  <text>{{item.gender}}</text>
</view>


小学期微信小程序实训篇1_介绍小程序、基本目录结构及简单练习、页面基本元素及其数据渲染

隐式转换

  • 差值表达式中,使用 字符串形式的456 与 数字形式的456 相减,发现值为0
  • 因为 存在数值类型的 运算,会将双方转为 数值类型

wx:for循环遍历

  • 循环遍历js中定义的数组
  • 数组中的item指向数组中的每一项,可以通过arr[index]来取数据
  • 使用wx:key来指定当前循环的唯一标识,如果是简单的数据,就使用wx:key = “*this”
上一篇:C#反射学习


下一篇:[CSS] 纯CSS的前端图标icon库并且修改大小和颜色