微信小程序开发第二章

最新推荐文章于 2024-09-02 14:30:40 发布

攸599

最新推荐文章于 2024-09-02 14:30:40 发布

阅读量1.7k

点赞数 37

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/2303_79629194/article/details/136445412

版权

小程序的基本目录结构

一.主体文件

微信主体部分由3个文件组成，这3个文件必须放在项目的目录中，负责小程序的整体配置，他们的名称是固定的。
app. js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app. js文件会和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。
app. json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。
app. wxss小程序主样式表文件，类似 HITML的：css 文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

二.页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对的资源进行数据绑定。
js文件页面逻辑文件，在该文件中编写JavaSoript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
wxnl文件页面结构文件，用于设计页面的布局、致据鄉定等，类似EITMI 页面中的．html 文件。该文件在页面中不可缺少。
wxss文件页面样式表文件，用于定义本灭面中用到的各类样式表。当页面中有样式表文件时，文什中的样式规测会层發理益 aor woas 中的样式现则：否则，直按使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。
json 文件页面配置文件。该文件在页面中不可缺少。

index.js：页面逻辑文件。

index.json：页面配置文件。

index.wxml：页面结构文件。

index.wxss：页面样式表文件。

小程序开发框架

一，视图层由结构设计的标签语言WXML和用于描述WXML组件样式的WXSS组成。

二，逻辑层使用javaScript来编写交互逻辑，网络请求，数据处理，小程序中的各个页面可以通过逻辑层来实现是数据管理，网络通信。应用生命周期管理和页面路由。

三，数据层在逻辑上包括页面临时数据或缓存，文件存储和网络存储与调用（三大功能）

1.页面临时数据或缓存
在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。
setData()函数的参数接收一个对象，以(kev,value)的形式表示将key在this.data中对应的值改变成value。
2.文件存储(本地存储）
使用数据API接口，如下：
wx.getStorage 获取本地数据缓存。
wx.setStorage 设置本地数据缓存。
wx. clearStorage 清理本地数据缓存。
3. 网络存储与调用
上传或下载文件API接口，如下：
wx.request 发起网络请求。
wx.uploadFile 上传文件。
wx.downloadFile下载文件。
调用URL的API接口，如下：
wx. navigateTo 新窗口打开页面。
wx. redirectTo原窗口打开页面。

创建小程序页面

1.在pages 目录下新建一个new目录，并在new 目录下新建new.js, new.json, new.wxml和 new.wxss空文件。

2.打开new.wxml文件,输入"内容"

3.打开项目配置文件app.json

4.打开new.json文件编辑代码

5.打开new.js文件输入代码

6.运行结果

配置文件

全局配置文件

一.pages 配置项

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

设置pages配置项时，注意：

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

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

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

二. window 配置项

window 配置项负责设置小程序状态栏，导航栏，标题，窗口背景色等系统样式。

三.tabBar 配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置来实现。

在app.json 文件中设置tabBar配置。

新建一个images文件夹放入四张图片

代码如下

{
  "pages": [
    "pages/new/new",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor":"#ccc",
    "backgroundTextStyle":"light"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
"tabBar":{
  "color":"#66666",
  "selectedcolor":"#ff0000",
  "backerStyle":"black",
  "backgroundColor":"#ffffff",
"list":[
  {
    "pagePath":"pages/logs/logs",
    "iconPath": "images/qqq.png",
    "selectedIconPath": "images/eee.png",
    "text": "首页"
  },
  {
    "pagePath":"pages/new/new",
    "iconPath": "images/rrr.png",
    "selectedIconPath": "images/www.png",
    "text": "新闻"
  }
]
}
}

运行结果

四.networkTimeout 配置项

小程序中各种网络请求API的超时时间只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。

五.debug 配置项

debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console（控制台）面板上。
app.json中"navigationBarTextStyle": "black"跟自建的页面文件夹设置的"navigationBarTextStyle": "red"优先取自建页面文件夹中的颜色。"就近原则"

页面配置文件

页面配置文件（*.json) 只能设置本页面的窗口表现，而且只能设置window 配置项的内容，在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app.json)中的配置值。

逻辑层文件

项目逻辑文件

项目逻辑文件app.js 中可以通过ApP 函数注册小程序生命周期函数、全局属性和全
局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
App()函数用于注册一个小程序，参数为 Object，用于指定小程序的生命周期函数、用户自定义属性和方法

页面逻辑文件

页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的特寺有对象(document、window)及通过操作 DOM 改变页面，只能采用数据绑定和事件响应来实现。
在逻辑层，Page()方法用来注册一个页面并且每个页面有仅有一个。

设置初始数据

设置初始数据是对页面的第一次数据绑定。对象 data将会以JSON(Javascript Object No- tation，JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON 的格式(字符串、数字、布尔值、对象、数组)。
视图层可以通过WXML对数据进行绑定。

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

在 Page() 函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo 和wx.redirectTo 及<navigator/>中的query。
onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。 onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab 切换时，调用该函数。
onUnload 页面卸载函数。当页面卸载、进行navigateBack 或redirectTo操作时，调
用该函数。

数据初始，数据绑定及运行案例

1.数据初始

Page({
  data:{
    name:'1wk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{date:18}],//数组
    object:{hobby:'computer'}//对象
  }
})

2.数据绑定

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

3.运行结果

在index.js和new.js文件夹中加入，代码

index.js 文件

Page({
  //生命周期函数--监听页面加载
onLoad(){
 console.log("index1 onLoad.....")
},
//生周期函数--监听页面初次渲染完成
onReady(){
 console.log("index1 onReady....")
},
//生命周期函数--监听页面显示
onShow(){
 console.log("index1 onShow....")
},
//生命周期函数--监听页面隐藏
onHide(){
 console.log("index1 onHide....")
},
//生命周期函数--监听页面卸载
onUnload(){
 console.log("index1 onUnload....")
},
})

new.js 文件

//news.js
Page({
  //生命周期函数--监听页面加载
onLoad(){
console.log("news onLoad.....")
},
//生周期函数--监听页面初次渲染完成
onReady(){
console.log("news onReady....")
},
//生命周期函数--监听页面显示
onShow(){
console.log("news onShow....")
},
//生命周期函数--监听页面隐藏
onHide(){
console.log("news onHide....")
},
//生命周期函数--监听页面卸载
onUnload(){
console.log("news onUnload....")
},

})

编译后

定义事件处理函数

开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行Page（）中定义的事件处理函数。代码如下：

//index1.wxml
<view bind:tap="myclick">单击执行逻辑层事件</view>
 
//index1.ls
myclick:function(){
    console.log("你点击了view")
  }

使用setData更新数据

index.js 代码

//index.js  
 
Page({
  //页面的初始数据
  data:{
    name:'sansan', //字符串
    age:100,      //数字
    birthday:[{year:2024},{month:3},{date:6}], //数组
    object:{hobby:'sing  dance swim '} //对象
  },
  chtext:function() {
    this.setData({
      name:'wawawa'
    });
  },
  chage:function() {
    this.setData({
      age:500
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2029},{month:13},{date:14}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'play，backetball，pingpong, giute'
    });
  },
  adddata:function() {
    this.setData({
      'address':'旅游'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },
 
});

new.wxml

<view>姓名：{{name}}</view>
<button bind:tap="chtext">修改姓名</button>
<view>年龄：{{age}}</view>
<button bind:tap="chage">修改年龄</button>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日             
</view>
<button bind:tap="charray">修改出生日期</button>
<view>爱好：{{object.hobby}}</view>
<button bind:tap="chobject">修改爱好</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>
<view bind:tap="myclick">单击执行逻辑层事件</view>

结果

页面结构文件

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml 文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>) 标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

数据绑定

小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法()将变量或运算规则包起来。

1. 简单绑定

简单绑定是指使用双大括号({{}})将变量包起来，在页面中直接作为字符串输出使用。
简单绑定可以作用于内容、组件属性、控制属性等的输出。

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

在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript 运算规则。

条件数据绑定

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

1. wx:if条件数据绑定

wx:if条件数据绑定是指使用wx:if这个属性来判断是否数据绑定当前组件。

<view wx:else>-1</view>
在以上代码中，当x的值大于0时，输出1；当x的值等于0时，输出0；否则，输出-1。

2. block wx:if条件数据绑定

当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性即可。

列表数据绑定

列表数据绑定用于将列表中的各项数据进行重复数据绑定。

1. wx:for

在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，格式如下:
<view wx:for =”{{items}}”>
{{index}}:{{item }}
</view>

2. block wx:for

与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。

模板

在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件
结合定义为一个模板，以后在需要的文件中直接使用这个模板。

1.定义模板

模板代码由wxml组成，因此其定义也是在wxml 文件中，定义模板的格式为:
<template name="模板名">

2.调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为:
<template is="模板名称"data=="{{传入的数据}}"/>
其中，<template>为模板标签；is属性用于指定要调用的模板名称；data属性定义要传
人的数据，如果模板中不需要传入数据，data属性可以省略.

引用页面文件

在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供了两种方式来引用其他页面文件。

1. import方式

如果在要引用的文件中定义了模板代码，则需要用import方式引用。

2. include方式

include方式可以将源文件中除模板之外的其他代码全部引人，相当于将源文件中的代码
复制到include 所在位置。

页面事件

简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。要实现这种机制，需要定义事件函数和调用事件。

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。

调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以"key =value" 形式出现，key (属性名)以 bind 或catch开头，再加上事件类型，如bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。

小程序中，事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父
级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。