小程序 _ 学习笔记_微信小程序开发工具app和index的区别是什么(1)

最新推荐文章于 2024-08-04 13:39:35 发布

2401_84590306

最新推荐文章于 2024-08-04 13:39:35 发布

阅读量678

点赞数 16

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84590306/article/details/138738959

版权

程序员专栏收录该内容

58 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

旧版：

新版：选择开发、开发管理、开发设置页面

注：AppSecret (小程序密钥) 只会明文展示一次，需要及时保存。若不慎丢失，可点击重置重新获取密钥。但该方法会导致你之前使用的密钥需要从新更换。

三、开发工具

3.1、下载与安装

官方开发工具

下载地址：稳定版 Stable Build | 微信开放文档

开发微信程序必须要安装官方的开发工具，此工具不但是编写代码所用的工作，还是开发编译小程序在电脑上能看到代码运行效果的 模拟器，所以一定要安装。

支付宝小程序：

百度小程序：

3.2、helloworld 项目

打开下载好的微信开发者工具 Stable

项目里面一定是要有 app.json 文件的，否则项目会启动失败的

假如你导入错项目了，可以删除后再次导入

view 标签（容器组件）它就相当于 html 中的 div 元素

四、小程序的文件结构及配置

查找文件 快捷键 : Ctrl + P

4.1、文件结构

小程序包含一个 描述整体程序的 app 和多个 描述各自页面的 page 。

一个小程序主体部分由三个文件组成，必须放在项目的 根目录 ，如下：


文件	必填	作用
app.js	是	小程序逻辑 - 小程序入口文件
app.json	是	小程序公共配置文件
app.wxss	否	小程序公共样式表

一个小程序 page 页面由四个文件组成，分别是：


文件类型	必填	作用
js	是	页面逻辑
wxml	是	页面结构 ( 相当于 html )
wxss	否	页面样式表
json	否	页面配置

4.2、小程序配置app.json****

参考网址：全局配置 | 微信开放文档

app.json 文件用来对微信小程序进行全局配置，设置小程序页面数量（路由）、窗口表现、设置底部或顶部菜单、网络请求超时时间等。

app.json 中不能添加任何注释，key 和 value 字符串必须用 双引号引起来，数组或对象最后一位不能有逗号。

debug debug 调试是否开启

pages 注册小程序的页面路径列表 ( 可理解为小程序中的路由 )

未指定 entryPagePath 时，数组的 第一项 代表小程序的默认初始页面（ 首页）!

数组当中有多少项相当于小程序有多少个页面

小程序中新增 / 减少页面，都需要在app.json内对 pages 数组进行修改。

=>

window 全局的默认窗口表现
开发者文档 => 全局配置 | 微信开放文档
用于设置小程序的状态栏、导航条、标题、窗口背景色
"window": {
    "enablePullDownRefresh": true,
    "backgroundColor": "#ff00ff",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3367D6",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程序学习开发",
    "navigationStyle": "default"
}
这里注意一下 navigationBarTitleText ，可配置全局也可配置局部：

可以在 pages 文件目录下每个页面文件下的 xxx.json 单独进行配置此页面对应的标题

tabBar 小程序底部或顶部菜单定义
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

"tabBar": {
    "color": "#999",
    "selectedColor": "#3367D6",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "iconPath": "/icon/cookbook.png",
        "selectedIconPath": "/icon/cookbook-active.png",
        "pagePath": "pages/demo1/demo1",
        "text": "测试页"
      },
      {
        "iconPath": "/icon/location.png",
        "selectedIconPath": "/icon/location-active.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }

{
  "pagePath": "pages/catalog/catalog",
  "iconPath": "icon/legalAid.png",
  "selectedIconPath": "icon/legalAid-active.png",
  "text": "法援"
},

networkTimeout

各类 网络请求的超时时间，单位均为毫秒。

五、视图结构 wxml

WXML 是框架设计的一套 标签语言，结合基础组件、事件系统，可以构建出页面的结构。

wxml 是一个严格的标记性语言，有开始就必须有结束，单标签就有一个结束符，属性必须要用引号引起来。

5.1、数据绑定

在 js 逻辑层中定义数据源，在 wxml 通过插值表达式 { { } } 调用定义好的数据源中数据

可以在初始化后，通过一个 setData 方法来进行后续 数据源数据的修改工作。

使用 setData 方法一定要注意 this 的指向问题，setData 是当前页面对象中的方法。

语法

this.setData({ key: value })

5.2、列表渲染 for

语法：wx: for 循环

wx:for-index 可以指定数组当前下标的变量名默认名为 index
wx:for-item 可以指定数组当前元素的变量名默认名为 item
wx:key 可以定义也可以不定义唯一的 标识符 提高性能，它是一个字符串

data: { arr: [1, 2, 3] }

5.3、条件渲染

语法：wx:if

在框架中，使用 wx:if=“{{ condition }}” 来判断是否需要渲染该代码块：

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

data: { age: 18 }

5.4、引用 ( 包含 )

把模板定义到外部，然后多个页面间可以共用使用定义的模板 WXML 结构显示。

引用 | 微信开放文档

WXML 提供两种文件引用方式 import和 include

import => 其实是我们严格意义上的引入 , 类似于我们定义的函数 , 把函数定义好之后 , 就可以在别的地方到处调用了 , 但是在我们的内存当中只有一份 , 所以说它是引用关系 , 也是效率最高的 .

include => 相当于把函数定义好之后 , 然后你在别的地方想用它的话 , 是把函数又复制了一份去使用 , 所以说它会占用我们的内存资源 ( 说白了 , include 相当于你把代码复制粘贴又放回去了 , 因此它的性能还是比较低下的 )

5.4.1、import

在 user.wxml 中定义了一个叫 item 的 template ：
<template name="item">
  <text>{{title}}</text>
</template>
# name template 定义的模板名称，一个文件中可以定义多个 template 但 name 的名称不能重复
在 index.wxml 中使用 import 引用了 item.wxml ，就可以使用 item 模板：
<import src="item.wxml"/>
<template is="item" data="{{title: '你好世界'}}"/> 
# is 指定定义存在好的模板名称。
# data 向模板中传数据
data: {

user: { id:2 , name: ‘李四’ }

}

5.4.2、include

include 相当于把引入的文件内容直接复制到目录文件中。（不常用）
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

六、wxss 样式

WXSS 是一套 样式语言 ，用于描述 WXML 的组件样式。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

目前支持的选择器有：


选择器	样例	样例描述
.class	.intro	选择所有拥有 class=“intro” 的组件
#id	#firstname	选择拥有 id=“firstname” 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

注：在小程序中，建议大家都用 flex 布局！

七、生命周期

网址：Page(Object object) | 微信开放文档 | 微信开放文档")

由框架自己触发的一系列事件函数 ( 钩子函数 ) 。

小程序数据交互就是通过不同的事件函数来完成的，了解生命周期函数，对于以后的数据交互是非常重要的。

app.js => 全局的生命周期 :

7.1、data 属性

页面的 初始数据

7.2、onLoad(Object[ json ]query)

页面加载时触发。一个页面 只会调用一次 ，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

参数说明：


名称	类型	说明
query	Object	打开当前页面路径中的参数 json 对象

7.3、onShow()

页面显示 / 切入前台时触发。一个页面可以 触发 N 次 。

7.4、onReady()

页面初次渲染完成时触发。一个页面只会 调用一次 。

7.5、onHide()

页面隐藏 / 切入后台时触发。一个页面可以 触发多次 。

7.6、onPullDownRefresh

监听用户下拉动作，此事件需要在 app.json 文件中 window 节点中 “开启全局的下拉刷新”

“enablePullDownRefresh”:true , 才能触发它作用：下拉加载更多

7.7、onReachBottom

页面上拉触底事件的处理函数，需要当前页面内容超过一屏显示作用：上拉加载更多

7.8、onPageScroll

页面滚动触发事件的处理函数，需要当前页面内容超过一屏显示作用：滚动事件监听

// 节流
function throttle(fn, wait = 600) {
  // 上一次执行时间
  let prevTime = 0
  // 定时器
  let timer = null

  return function (ev) {
    // 当前时间
    let nowTime = Data.now()
    // 计算当前是否达到了设置的执行时长
    let diffTime = wait - (nowTime - prevTime)
    if (diffTime <= 0) { // 到达设置的时长
      // 让上一次执行的时间设置为当前执行的时间
      prevTime = nowTime
      // 清除定时器
      clearTimeout(timer)
      timer = null
      // 执行回调函数 , 注意 this 指向
      fn.call(this, ev)
    } else if (!timer) {
      timer = setTimeout(() => {
        // 清除定时器
        clearTimeout(timer)
        timer = null
        // 执行回调函数 , 注意 this 指向
        fn.call(this, ev)
      }, wait)
    }
  }
}

7.9、onShareAppMessage

用户点击右上角转发，触发此方法，在此方法中可以自定义转发的内容。作用：自定义分享

八、自定义事件

8.1、事件绑定

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#事件详解

小程序事件绑定是在组件中以属性的形式来完成的。

语法：
bind 事件名 / catch 事件名 = ”方法名”
注：小程序中绑定方法名不能用 括号，直接写 方法名 即可
bind  绑定为 冒泡事件
catch 绑定为 非冒泡事件
自基础库版本 1.5.0 起，在非原生组件中，bind 和 catch 后可以紧跟一个冒号，其含义不变，如 bind:tap
原生组件【camera、canvas、live-player、live-pusher、video、map、textarea、input】

8.2、事件对象

当组件触发事件时，逻辑层绑定该事件的处理方法会收到一个事件对象。通过此对象来进行小程序的自定义事件参数据传递。

BaseEvent 基础事件对象属性列表：


属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性值集合 data- 开头定义的属性
currentTarget	Object	当前组件的一些属性值集合 (对象) 在组件中 data- 开头定义的属性

九、常用小程序组件

9.1、组件介绍

基础组件 | 微信开放文档

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

一个组件通常包括开始标签 < > 和结束标签 </ >，属性用来修饰这个组件，内容在两个标签之间。

9.1.1、属性值类型


类型	描述	注解
Boolean	布尔值	组件写上该属性，不管该属性等于什么，其值都为 true，只有组件上没有写该属性时，属性值才为 false。如果属性值为变量，变量的值会被转换为 Boolean 类型 {{ }}
Number	数字	1, 2.5 {{ }}
String	字符串	“string”
Array	数组	[ 1, “string” ] {{ }}
Object	对象	{ key: value } {{ }}
EventHandler	事件处理函数名	“handlerName” 是 Page 中定义的事件处理函数名

9.1.2、共同属性

所有组件都有的属性：


属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean [false]	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

9.2、视图容器组件

9.2.1、swiper

滑块视图容器。

swiper | 微信开放文档

9.2.2、scroll-view

scroll-view | 微信开放文档

可滚动视图区域。使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，同时还需要在组件属性中定义允许纵向滚动 scroll-y=”{{true}}” 。

注意点
tip: 请勿在2.4.0以下scroll-view 中使用 textarea、map、canvas、video 组件
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
一定要设置高度，事件触发，必须是大于了你设置的高度才能被触发到事件

9.3、表单组件

<form bindsubmit="formSubmit">
  <view class='personal-data'>
    <view class='list'>
        <view class='item acea-row row-between-wrapper'>
          <view>头像</view>
          <view class='pictrue'><image src='{{userInfo.avatarUrl}}'></image></view>
        </view>
        <view class='item acea-row row-between-wrapper'>
          <view>名字</view>
          <view class='input'><input type='text' disabled='true' name='nickname' value='{{userInfo.nickName}}'></input></view>
        </view>
        <view class='item acea-row row-between-wrapper'>
          <view>手机号码</view>
          <button name='phone' class='phone' value='{{userInfo.phone}}' wx:if="{{!userInfo.phone}}"  bindgetphonenumber="getPhoneNumber" hover-class='none' open-type='getPhoneNumber'>
             点击获取
          </button>
          <view class='input acea-row row-between-wrapper' wx:else>
            <input type='text' disabled='true' name='phone' value='{{userInfo.phone}}' class='id'></input>
            <text class='iconfont icon-suozi'></text>
          </view>
        </view>
        
        <view class='item acea-row row-between-wrapper'>
          <view>代理申请</view>
          <view class='input acea-row row-between-wrapper' wx:if="{{userInfo.userLevel==2}}">
            <input type='text' disabled='true'  value='{{userInfo.userLevelDesc}}' class='id'></input>
            <text class='iconfont icon-huangguan'></text>
          </view>
          <view class='input acea-row row-between-wrapper' wx:elif="{{userInfo.status == 3}}">
            <input type='text' disabled='true'  value='代理申请中，请耐心等待管理员审批...' class='id'></input>
            <text class='iconfont icon-huangguan'></text>
          </view>
          <button name='phone' class='phone'  wx:else  hover-class='none'  bindtap="applyAgency" >
             点击申请
          </button>
        </view>
        
        <view class='item acea-row row-between-wrapper'>
          <view>ID号</view>
          <view class='input acea-row row-between-wrapper'>
            <input type='text' value='1000{{userInfo.userId}}' disabled='true' class='id'></input>
            <text class='iconfont icon-suozi'></text>
          </view> 
        </view>
    </view>
    <view wx:if="{{userSharedUrl && userSharedUrl!=''}}" style="text-align:center;background-color:#fff;">
      <view>代理专属推广二维码（长按保存到相册）</view>
      <image class="img" src="{{userSharedUrl}}" bindlongpress="saveShare" style="width:600rpx;height:600rpx;"></image>
    </view>
    <button class='modifyBnt' bindtap="exitLogin">退 出</button>
  </view>
</form>

十、自定义组件

自定义组件 | 微信开放文档

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个 低耦合 的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

10.1、创建自定义组件

打开官方开发工具，自定义目录后右击菜单创建自定义组件

10.2、使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行 引用声明。此时需要提供每个自定义组件的 标签名 和对应的自定义组件 文件路径：

{
  "usingComponents": {
	// 在父模板中调用的标签名    组件的路径
    "component-tag-name": "path/to/the/custom/component"
  }
}

小程序框架中，自定义组件通信：父组件向子组件通信，使用自定义属性完成
子组件向父组件通信，使用自定义事件完成

****十一、WXS 模块

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/01wxs-module.html

11.1、概述

WXS（ WeiXin Script ）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXS 中定义的函数可以在 wxml 文件中使用，可以用它来当 过滤器使用。

WXS 以 .wxs 扩展名结尾，文件中代码写法和 JS 类似，不支持 ES6 写法

【很少用，不常见】

11.2、创建 wxs 模块

11.3、调用

在 wxml 文件去引用，引用的时候一定要用 相对应地址

每个 wxs 模块均有一个内置的 module 对象。

<wxs src="../../tools.wxs" module="tools" />

十二、网络请求

RequestTask | 微信开放文档

12.1、网络请求设置

12.2、发起网络请求

语法
wx.request({
	url,
	method,


![img](https://img-blog.csdnimg.cn/img_convert/91b913be3b93ba847739cf8facc0506b.png)
![img](https://img-blog.csdnimg.cn/img_convert/3a08c9dd1ae3cf9741b005031e2491d2.png)
![img](https://img-blog.csdnimg.cn/img_convert/cff922b1a0659b5c1482bdcb96d97c84.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

[](https://i-blog.csdnimg.cn/blog_migrate/9f5ce3e263b8b5f7a18cc927a9fd4c4a.png)




---


## ******十二********、********网络请求******


[RequestTask | 微信开放文档](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)


### ******12.1、网络请求设置******


![](https://i-blog.csdnimg.cn/blog_migrate/2dcf6d5c9961ecea1f622f7e0ef113c1.png)


### ******12.2、发起网络请求******

语法
wx.request({
url,
method,

[外链图片转存中…(img-DenFaZ3t-1715458213514)]
[外链图片转存中…(img-rWPK0ZrD-1715458213514)]
[外链图片转存中…(img-cX5Blc0L-1715458213514)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取