微信小程序第二章总结

Yui450

已于 2024-03-10 13:31:28 修改

阅读量1k

点赞数 24

文章标签：前端

于 2024-03-08 11:56:53 首次发布

本文链接：https://blog.csdn.net/weixin_74369293/article/details/136459936

版权

小程序的基本目录结构

基本排版

pages

所有的页面存放在pages文件夹中

pages中每个文件夹都表示一个页面

index

其中index四个文件有分别的作用

.json	页面配置
.ts	页面逻辑
.wxml	页面结构
.wxss	页面样式表

utils

所有的工具包存放在utils文件夹中

utils目录用来存放一些公共的.js文件

pages中的所有页面都可以用到utils中的工具包，当某个页面需要用到utils.js函数时，可以将其引入后直接使用

app

app开头的为项目的主体文件

app.json	主逻辑文件
app,ts	主配置文件
app.wxss	主样式文件

开发框架

小程序MINA框架将整个系统划分为视图层和逻辑层。

视图层

MINA框架的视图层由WXML和WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。

逻辑层

逻辑层用于处理事务逻辑。

如何删除和新建页面

如图作者创建了一个名为news的页面文件

单击选中后删除

然后选择编译

新建直接在app.json文件中

pages输入想要的文件及名称

即可得到想要的页面和四个基本配置文件

主体json配置文件

常用window全局配置

tabBar选项卡

list属性

imges文件夹

没有可自建

用于存放导航栏选项卡图标

数据初始，数据绑定及运行效果

news.wxml

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>

news.js

Page({
  data:{
    name:'lwh',
    age:20,
    birthday:[{year:2004},{month:7},{date:12}],
    object:{hobby:'computer'}
  }
})

运行结果

app.js

app.js文件是项目的入口文件：

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
 
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
 
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

数据绑定和条件数据绑定及模板使用

news.js设置数据绑定

Page({
  data:{
    name:'lxx',
    age:20,
    num:99,
    birthday:[{year:2004},{month:7},{date:12}],
    object:{hobby:'computer'},
    students:[
      {nickname:"tom",height:180,weight:140},
      {nickname:"anne",height:160,weight:100}
    ]
  }
})

news.wxml使用数据

<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>算术:{{(age+num)*3/3}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==18? 1:2}}</view>
<view wx:if="{{age>20}}">1</view>
<view wx:elif="{{age<20}}">2</view>
<view wx:else>20</view>
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
<template name="stu">
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>