技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

第二章微信小程序开发基础

 收录于 未分类
   约 6011 字   预计阅读 12 分钟 
https://bing.ee123.net/img/rand?artid=136460217

第二章微信小程序开发基础

一、小程序的基本目录结构

在微信小程序的基本目录结构中，项目主目录下有 2个子目录(pages和utils)和4个文件        (app.js、app.json、app.wxss 和project. config. json )。

pages 和utils 目录

pages目录用于存放所有页面。 peges目录中有2个子目录，分别是imdex和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同扩展名(.wxml、.wxss、.js和.json)的文件

https://i-blog.csdnimg.cn/blog_migrate/c2d8dece1f219d900351bf5364a27d29.png

utils目录用于存放一些公共的.js文件，也可以统称为工具包。 当某个页面需要用到 utls.js 函数时，可以将引人后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目来存放。

https://i-blog.csdnimg.cn/blog_migrate/eb9f4de8d1d3da490c119763cad78159.png

页面文件

index.js: 页面逻辑文件， JavaScript 代码在该文件编写来控制页面的逻辑。

index.json: 页面配置文件。

index.wxml: 页面结构文件，用于设计页面的布局、数据绑定等。

index.wxss: 页面样式表文件，用于定义本页面中用到的各类样式表。

主体文件

app.js: 小程序逻辑文件。

app.json: 小程序公共设置文件，配置小程序全局设置。

app.wxss: 小程序主样式表文件，类似HTML的.css文件。

二、小程序的开发框架

微信团队为小程序的开发提供了MINA框架，小程序MINA框架将整个系统划分为视图层和逻辑层。

视图层

视图层(View)由框架设计的 标签语言WXML(WeiXin Markup Language)和用于描述 WXML 组件样式的WXSS(weiXinStyle Sheets)组成， 它们的关系就像HTML和CSS的关系 。 对于微信小程序面言，视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;wxss 文件用于描述页面的样式。

逻辑层

逻辑层(AppService)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行，并且采用JavaScript编写。

页面数据绑定

MINA 框架为页面组件提供了bindtap、bindtouchstar 等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互(数据)

如下图所示：

https://i-blog.csdnimg.cn/blog_migrate/f4fbd42592bea67d2cc309d79f965eee.png

三、创建小程序页面

页面文件夹创建

单击pages目录 再点击2.并命名文件夹为wer

https://i-blog.csdnimg.cn/blog_migrate/34e6b9e06551e56dd0f68d0b0bddca29.png

单击wer文件，再点击 加号创建4个文件（wer.js、wer.json、wer.wxml、wer.scss）并在wer文件夹中的.js、.wxml、.jsom文件编写代码

https://i-blog.csdnimg.cn/blog_migrate/2051204cfba0b98fa60a8c7c7ea2cdaa.png

代码

wer.js文件中的代码：

Page({
  
})

wer.json文件中的代码：

{
  
}

wer.wxml文件中的代码：

天地不仁，以万物为刍狗；圣人不仁，以百姓为刍狗。

配置页面

因为页面没有配置在模拟机上，所以 需要在utils目录中的app.json文件中添加一行代码

 "pages/wer/wer",

具体是在

https://i-blog.csdnimg.cn/blog_migrate/2382f8d21a04cb583435005b11d6a4ee.png

https://i-blog.csdnimg.cn/blog_migrate/df9b059d621177bcc44486b398efa2d8.png

https://i-blog.csdnimg.cn/blog_migrate/f7238f82af6db0ae6d156114ab8bdc3f.png

运行结果

文字在最上面也没有关系，有的是在距下点，正常。

https://i-blog.csdnimg.cn/blog_migrate/24e36981a42d35a3d1bfde3e46c7b2d0.png

四、配置文件

小程序的全局配置保存至app.json文件中，使用app.json来配置 pages的路径、Window的表现、tabBar、networkTimeout配置项  、debug配置项 。

各全局配置项描述如下： https://i-blog.csdnimg.cn/blog_migrate/792e6d7749776883109171a218678498.png 全局配置文件内容的整体结构如下：

{
//设置页面路径
"pages":[],
//设置默认页面的窗口表现
"window":{},
//设置底部tab的表现
"tabBar":{},
//设置网络请求API的超时时间值
"networkTimeout":{},
//设置是否开启debug模式
"debug":false
}

pages配置项

pges配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串、代表对应页面的“路径”+“文件名”。

pages 配置项是必填项。

设置 pages 配置项时，应注意以下3点:

(1) 数组的第一项用于设定小程序的初始页面。

(2) 在小程序中新增或减少页面时，都需要对数组进行修改。

(3) 文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、wxm 和wxss 文件进行整合数据绑定。

面

pages代码

app.json 文件的配置代码如下

  "pages": [ "pages/zlfw/zlfw",
    "pages/zlfw2/zlfw2",
    "pages/index/index",
    "pages/wer/wer",
    "pages/logs/logs"
  ],
pages运行结果

https://i-blog.csdnimg.cn/blog_migrate/614f6ae4784e39e2e8604f966e55ed7b.png

window配置项

window配置项专门设置小程序的 状态栏、导航栏、标题、窗口背景 等样式，可以配置的参考对象如下所示：

https://i-blog.csdnimg.cn/blog_migrate/2e80b217325de21ae19d93f6319e8b07.png

window配置代码

在app.json中window配置代码

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "navigationBarBackgroundColor": "#ff00ff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light" 

  },
window 运行结果

https://i-blog.csdnimg.cn/blog_migrate/e7462f26315d6b49ea72714a7e6a568b.png

tabBar配置项

tabBar配置项用来配置 程序顶部或者底部菜单栏 ，可以配置参考对象如下所示：

https://i-blog.csdnimg.cn/blog_migrate/a1dbefa61cf417671a36b4ab8e807cff.png

其中，list(列表）接受数组值，数组中的每一项也都是一个对象。对象的数值说明如下所示

https://i-blog.csdnimg.cn/blog_migrate/5a273be280a3b63d4a543259bc990928.png

tabBar配置代码

app.json中的代码配置

点击首页会跳转到zlfw页面，点击新闻就会跳转到zlfw2页面，且底部菜单栏的图标会发生变化

如果设置iconpath与selectedIconPath一样的话图标不会变化 ，再如果color跟selectedColor的值一样，则点击底部菜单栏时文字颜色不发生变化。

 "tabBar": {
    "color": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#fff",
    "selectedColor": "#ff0000",
    "list": [{"pagePath": "pages/zlfw/zlfw",
      "iconPath": "/image/home.png",
      "selectedIconPath": "/image/home_1.png",
      "text": "首页"},
      {"pagePath": "pages/zlfw2/zlfw2",
        "iconPath": "/image/lock.png",
        "selectedIconPath": "/image/lock-fill.png",
        "text": "新闻"}]
  },

注意： 如果自己的文件目录上没有img文件包就自己创建一个放图片的文件包，且 文件路径名字要写对。

tobBar运行结果

点击模拟器上的首页后效果如下

https://i-blog.csdnimg.cn/blog_migrate/0f7b6cdac8565afe8874105c6ffe12bc.png

点击模拟机上的新闻后效果如下

https://i-blog.csdnimg.cn/blog_migrate/a029a2d93d97541d2d7a590775cfc210.png

networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项 进行统一设置，且不能在API中单独设置，networkTimeout配置项 可以配置的属性如下所示：

https://i-blog.csdnimg.cn/blog_migrate/fc90bcf5d2af49b90d2aac117c79760b.png

networkTimeout配置代码

在app.json中代码

 " networkTimeout":{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downioadFile":20000
},
networkTimeout运行结果

https://i-blog.csdnimg.cn/blog_migrate/8e3e458908b6e0904c52ca6f60a90109.png

debug配置项

debug配置项用于开启开发者工具的调试模式，默认为false。

pages、tabBar、networkTimeout、window整体代码

{
  "pages": [ "pages/zlfw/zlfw",
    "pages/zlfw2/zlfw2",
    "pages/index/index",
    "pages/wer/wer",
    "pages/logs/logs"
  ],
  "tabBar": {
    "color": "#ff0000",
    "borderStyle":"black",
    "backgroundColor": "#fff",
    "selectedColor": "#ff0000",
    "list": [{"pagePath": "pages/zlfw/zlfw",
      "iconPath": "/image/home.png",
      "selectedIconPath": "/image/home_1.png",
      "text": "首页"},
      {"pagePath": "pages/zlfw2/zlfw2",
        "iconPath": "/image/lock.png",
        "selectedIconPath": "/image/lock-fill.png",
        "text": "新闻"}]
  },
 " networkTimeout":{
"request":20000,
"connectSocket":20000,
"uploadFile":20000,
"downioadFile":20000
},
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "navigationBarBackgroundColor": "#ff00ff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light" 

  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

五、逻辑层文件

小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件

项目逻辑文件

项日逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

App()函数用于注册一个小程序，参数为0bject，用于指定小程序的生命周期函数、用户自定义属性和方法。参考数如下图所示 https://i-blog.csdnimg.cn/blog_migrate/2b545380252442e8c060e0e3702ce645.png

onLaunch()、onShow()、onHide()代码

实现 onLaunch()、onShow()、onHide() 这些参数需要在app.js中打以下代码

// app.js
App({
  onLaunch(){
    console.log("小程序初始化");
  },
  onShow(){
    console.log("小程序启动");
  },
  onHide(){
    console.log("小程序隐藏");
    
  },
})
onLaunch()、onShow()、onHide()的 运行效果

运行效果需要在调试台中Console窗口中观看是否有 “小程序初始化、小程序启动、小程序隐藏 ” 的文字出现。

https://i-blog.csdnimg.cn/blog_migrate/084934ed523041a6a990081bbc02c9db.png

小程序隐藏

小程序隐藏需要点击模拟器上的‘圆圈’，这样小程序就隐藏在后台，Console窗口就会出现小程序隐藏这5个字。

点击‘圆圈 ’

https://i-blog.csdnimg.cn/blog_migrate/05ce0c38b4592cc94daec2f79b208685.png

点击后效果图 https://i-blog.csdnimg.cn/blog_migrate/0d12c15b2432ad24ba9ee1c11cb2b483.png

再次运行，模拟器上就会显示页面。

页面逻辑文件

页面逻辑文件的主要功能有三个分别是:

1.设置初始数据。

2.定义当前页面的生命周期函数。

3.定义事件处理函数。

我们可以发现在逻辑层中 ，Page()方法用来注册一个页面，并且每个页面有且仅有一个。各个参数如下表所示。

https://i-blog.csdnimg.cn/blog_migrate/3675d793777664b7232965c122bf0a60.png

数据初始

名字数据初始化案例方法如下：

1.打开zlfw.js在data中打代码

https://i-blog.csdnimg.cn/blog_migrate/d563b1d2b5d471ec280f2c2fe40fd2c5.png

数据初始代码

代码如下

 data: {
    name:'xjx',//字符串
    age:30,
    birthday:[{year:2035},{month:5},{date:15}],//数组
    object:{hobby:'computer programent'}//对象
  },

因为需要zlfw.js文件中把数据初始化再传送到zlfw.wxml文件中指定位置。

2.打开zlfw.wxml并写代码，而且数据需要在.wxml文件中绑定。 代码如下:

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


</view>
<view>爱好:{{object.hobby }}</view>
数据初始运行结果

https://i-blog.csdnimg.cn/blog_migrate/71f57c1cbd14702055c67e61455ae915.png

六、页面结构文件

页面结构文件(WXML)是框架设计的一套类似 HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构 ，即.wxm文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如)和结束(如标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。

WXML还具有 数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件 等能力。

数据绑定与运行效果

数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data 中的数据。小程序的数据绑定使用Mustache语法(

{ {}}

)将变量或运算规则包起来。

简单绑定

简单绑定 是指使用双大括号(

{ {}}

)将变量包起来，在页面中直接作为字符串输简单绑定可以作用于 内容、组件属性、控制属性

等的输出。

【注意】 简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。

在.wxml中的代码如下：

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


</view>

在.js中的代码如下：

data: {
    name:'xjx',//字符串
    age:30,
    num:100,
   
    birthday:[{year:2035},{month:5},{date:15}],//数组
   
}
简单绑定运行效果

https://i-blog.csdnimg.cn/blog_migrate/ee15ed2ff227ab4ba7dba0813438f811.png

运算

我们可以在 语法{ {}}中做一些简单的运算，主要有算术运算、逻辑运算、三元运算、字符串运算、数据路径运算等。

代码（.wxml文件中）

算术运算

<view>算术运算:{{age+num}}</view>

逻辑运算

<view>逻辑运算:{{age==34}}</view>

三元运算

<view>三元运算:{{3==4?2:8}}</view>
<view>三元运算:{{age==4?2:num}}</view>

代码（.js)

data: {
    name:'xjx',//字符串
    age:30,
    num:100,
   
    birthday:[{year:2035},{month:5},{date:15}],//数组
    object:{hobby:'computer programent'}//对象
}

运算结果

https://i-blog.csdnimg.cn/blog_migrate/64c84514795e987b8067d84e0a2fd398.png

条件数据绑定

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

wx:if条件数据绑定

wx:if条件数据绑定是指使用wx:i这个属性来判断是否数据绑定当前组件。.wxml代码如下

<view wx:if="{{age>40}}">条件语句：1</view>
<view wx:elif="{{age==40}}">条件语句：2 elseif==elif </view>
<view wx:else>条件语句：3</view>

运行结果

https://i-blog.csdnimg.cn/blog_migrate/131b83890bed70723cff0c29b2d20934.png

wx:for循环

wxml代码如下

<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>

js代码如下

// pages/zlfw/zlfw.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:'xjx',//字符串
    age:30,
    num:100,
   
    birthday:[{year:2035},{month:5},{date:15}],//数组
    object:{hobby:'computer programent'},
    //对象
    students:[
      {nickname:"TOM",height:"180",weight:150},
      {nickname:"AOM",height:"160",weight:100}
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

运行结果

https://i-blog.csdnimg.cn/blog_migrate/e567a912d634c322ffa0b09103ee4cc8.png

template标签是 HTML的template标签用于定义页面中的可复用内容模板。

wxml代码如下

<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>

运行效果

https://i-blog.csdnimg.cn/blog_migrate/bdd16be2bc61c0dc754bca1904ccd627.png

如果没有下面代码，就运行不出来模块“stu”。

<template is="stu" data="{{students}}"></template>

就近原则

就近原则 ：我们在指定界面包里.json文件中打代码编辑导航栏，在app.json中也有导航栏的代码编辑，模拟器页面只会 在目录中选择靠自己比较近的.json文件中的代码显示。

例如：

app.json文件 打的代码如下：

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序",
    "navigationBarBackgroundColor": "#ff00ff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light" 

  },

zlfw.json文件 打的代码如下：

{
  

    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序-首页",
    "navigationBarBackgroundColor": "#ff00ff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light" 

  
}

页面原先效果

app.json文件

https://i-blog.csdnimg.cn/blog_migrate/28456264db77cab6cd6c960e89ff64bb.png

zlfw.json文件

https://i-blog.csdnimg.cn/blog_migrate/e068aa75fca83e88725a62e3b5839cd9.png

运行效果

https://i-blog.csdnimg.cn/blog_migrate/181f595b60a64dd8bc9dae2e17f773a0.png

冒泡事件

■冒泡事件，冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。

■非冒泡事件，非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个，如下表所示

https://i-blog.csdnimg.cn/blog_migrate/6e1992549e65208326e89df763eb4c17.png

WXSS常用属性

WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如表2-10 所示。

https://i-blog.csdnimg.cn/blog_migrate/a9022e124357264afc885c87beb2b5ff.png

https://i-blog.csdnimg.cn/blog_migrate/7ccced13f7dbc2dce70559902f86de2e.png

七、总结

本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识，大家必须深刻理解和熟练掌握，并勤写代码多加练习，为后续的学习打下扎实的基础。

更新于 2024-03-04
 编辑器, 微信小程序, 小程序
返回 | 主页