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

2023-02-05 22:31:52

一、介绍小程序

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

小程序的优势

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

什么是云开发

对前端者友好开发
使用 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>

隐式转换

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

wx:for循环遍历

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

码农公寓

目录

一、介绍小程序

二、基本目录结构

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

相关文章