小程序学习（上篇）

已于 2022-09-02 16:53:42 修改
阅读量600 收藏 4
点赞数 1
分类专栏： 小白 文章标签： 微信小程序 小程序 前端
于 2022-08-14 20:49:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61529681/article/details/126336123
版权

一、绪论

微信小程序命题微信小程序命题哔哩哔哩bilibili

拖曳式可视化微信小程序

DIY官网专注做拖拽式可视化微信小程序、Bootstrap、单页动画、Html5 WebApp设计工具 (diygw.com)

微信开发文档

微信开放文档 (qq.com)

微信小程序设计指南

微信小程序设计指南 | 微信开放文档 (qq.com)

微信小程序开发黑马程序员

黑马程序员微信小程序开发前端教程零基础玩转微信小程序哔哩哔哩_bilibili

二、微信小程序

触手可及

2.1、为什么是微信小程序

  1. 微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户；

  2. 推广app或公众号的成本太高；

  3. 开发适配成本高；

  4. 容易小规模试错，然后快速迭代；

  5. 跨平台。

2.2、环境准备

开发微信小程序之前，必须要准备好

2.2.1、注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

访问注册页面，耐心完成注册即可

2.2.2、获取APPID

由于后期调用微信小程序的接口等功能，需要索取开发者的小程序中的APPID，所以在注册成功后，可登录，然后获取APPID。

登录，成功后可看到如下页面。

然后复制你的APPID，悄悄的保存起来，不要给别人看到。

 

2.3.3、开发工具

下载地址：稳定版 Stable Build | 微信开放文档 (qq.com)

微信小程序自带开发者工具，集 开发 预览 调试 发布 于一身的完整环境

但由于编码的体验不算好， 因此建议使用 vs code +微信小程序编辑工具 来实现编码

vs code负责敲代码，微信编辑器负责预览

3、第一个微信小程序

3.1、使用APPID时，选择小程序以及JavaScript

3.2、不使用APPID时

4、小程序结构目录

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

小程序框架提供了自己的视图层描述语言WXHML和WXSS，以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。‘

4.1、小程序文件结构和传统web对比

结构传统web微信小程序
结构htmlwxml
样式csswxss
逻辑JavaScriptJavaScript
配置无json

通过以上对比得出，传统web 是三层结构。而微信小程序是四层结构，多了一层配置.json

4.2、基本的项目目录

4.3.1、了解项目的基本组成结构

  1. pages：用来存放小程序的页面

  2. utils：用来存放工具性质的模块（例如：格式化时间的自定义模块）

  3. app.js：小程序项目的入口文件

  4. app.json：小程序项目的全局配置文件

  5. app.wxss：小程序项目的全局样式文件

  6. project.config.json：项目的配置文件

  7. sitemap.json: 用来配置小程序及其页面是否允许被微信索引

开发目录为：
​
├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

4.3.2、小程序页面的组成部分

4.3.1、json配置文件的作用

json是一种数据格式，在实际开发中，json总是以 配置文件的形式出现。小程序项目中也不例外：通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。

小程序项目中有4种json配置文件，分别是：

  • 项目根目录的app.json配置文件；

  • 项目根目录中的project.config.json配置文件；

  • 项目根目录中的sitemap.json配置文件；

  • 每个页面文件夹中的.json配置文件

 

   "backgroundTextStyle": "dark", //加载小圆圈的颜色
    "navigationBarBackgroundColor": "#0094ff",//导航栏背景颜色
    "navigationBarTitleText": "我的应用",//导航栏的文本内容
    "navigationBarTextStyle": "black",//导航栏标题颜色，仅支持 black / white
    "enablePullDownRefresh": true,//是否开启全局的下拉刷新
    "backgroundColor": "#0088ff"//加载部分的背景颜色

4.3.2、全局配置文件app.json

4.3.2.1、全局配置文件-pages字段

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

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

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

小程序官方建议把所有小程序的页面，都存放在pages目录里，以单独的文件夹存在，其中，每个页面由4个基本文件组成，他们分别是：

  • .js文件（页面的脚本文件，存放在页面的数据、事件处理函数等）

  • .json文件（当前的页面的配置文件，配置窗口的外边、表现等）

  • .wxml 文件（页面的模板结构文件）

  • .wxss文件（当前页面的样式表文件）

4.3.2.1、全局配置文件-window字段

用于设置小程序的状态栏、导航条、标题、窗口背景色

4.3.2.2、全局配置文件-tabbar字段

在全局配置文件app.json中配置

 "tabBar": {
​
  "list": [{
​
   "pagePath": "pagePath",//路径
​
   "text": "text",//文本内容
​
   "iconPath": "iconPath",//未选中图标路径
​
   "selectedIconPath": "selectedIconPath"//已选中图标路径
​
  }]
 }

当position选择top之后，图标将不再显示。

position与list是平级的

4.3.3、页面配置文件

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段），具体的取值和含义可参考全局配置文档中说明。

4.3.4、sitemap配置-了解即可

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；

注：没有 sitemap.json 则默认所有页面都能被索引

注：{"action": "allow", "page": "\*"} 是优先级最低的默认规则，未显式指明 "disallow" 的都默认被索引

5、模块语法

记得在vscode里安装小程序开发助手

5.1、wxml

1、text 相当于以前web中的 span标签 行内元素 不会换行

2、view 相当于以前web中的 div标签 块级元素 会换行

5.2、数据绑定

WXML中的动态数据均来自对应的Page的data

数据绑定使用Mustangtache语法（双大括号）将变量包起来。

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

<view>{{person}}</view>

显示是：[object Object]

<!-- 5 在标签的属性值中使用 -->
​
<view data-num="{{num}}">自定义属性</view>
​
​
<!-- 6 使用bool类型充当属性,checkbox复选框
​
checked -->
​
<view>
​
<checkbox checked="{{false}}"> </checkbox>
     或者<checkbox checked="{{isChecked}}"> </checkbox>
/!-- 字符串和花括号之间一定不要存在空格，否则会导致识别失败。
     以下写法是错误的：<checkbox checked="       {{isChecked}}"></checkbox>--/
</view>

5.3、运算

“>=表达式”

  1. 可以在花括号中 加入 表达式 --“语句”

  2. 表达式：指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算

1.数字的加减

2.字符串拼接

3.三元表达式

3.语句

  1. 复杂的代码段

  • if else

  • switch

  • do while … …

  • for… …

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

5.3.1、三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

5.3.2、算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
​
3+3+d

5.3.3、逻辑判断

<view wx:if="{{length > 5}}"> </view>

5.3.4、字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: 'MINA'
  }
})

5.3.5、数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

5.4、组合

也可以在Mustache内直接进行组合，构成新的对象或者数组

5.4.1、数组

5.4.2、对象

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

5.5、列表渲染

5.5.1、wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

wx:for="{{数组或对象}}"

wx:for-item=“循环项的名称”

wx:for-index=“循环项的索引”

Page:({ data: {
​
  list:[
​
   { id:0,
​
•    name:"猪八戒"
​
   },{
​
•    id:1,
​
•    name:"天蓬元帅"
​
   },{
​
•    id:2,
​
•    name:"沙增"
​
   }
​
  ]
​
 },
​
wxml中
 <view>
 <view wx:for="{{list}}"
  wx:for-item="item"
   wx:for-index="index">
 索引:{{index}}
 --
 值：{{item.name}}
 </view>
 </view>

5.5.2、wx:key

wx:key="唯一的值"用来提高列表渲染的性能

  • wx:key 绑定一个普通的字符串的时候，那么这个字符串 名称肯定是循环数组中的对象的唯一属性

  • wx:key =“*this” 就表示 你的数组是一个普通的数组 *this表示是循环项 [1,2,3,4,5]或者[“1”,”abc”,”sylvia”]

  • 当出现 数组的嵌套循环的时候，尤其要注意 以下绑定的名称不要重名

  • 默认情况下，我们不写 wx:for-item=“item” wx:for-index=“index” 小程序也会把 循环项的名称 和索引的名称 item 和 index 只有一层循环的话（wx:for-item=“item” wx:for-index=“index”）可以省略

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

示例代码

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
​
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

  • push 遇到数组参数时，把整个数组参数作为一个元素；而 concat 则是拆开数组参数，一个元素一个元素地加进去。

  • push 直接改变当前数组；concat 不改变当前数组。

5.5.3、对象循环

  • wx:for=“{{对象}}” wx:for-item=“对象的值” wx:for-index=“对象的属性”

  • 循环对象的时候，最好把item和index的名称都修改一下

wx:for-item=“value” wx:for-index=“key”

5.6、条件渲染

5.6.1、wx:if

wx:if="{{true/flase}}"

wx:if

wx:elif

wx:else

5.6.2、hidden

1在标签上直接加入属性 hidden

2 hidden="{{true}}"

5.6.3、什么场景下使用哪个

1 当标签不是频繁的切换显示 优先使用 wx:if

直接把标签从页面结构给移除掉

2 当标签频繁的切换显示的时候 优先使用hidden

通过添加样式的方式来

再加入 <view hidden style="display:flex;">hidden</view>就覆盖了原来的样式

6、小程序中的事件绑定

6.1、

1、需要给input标签绑定 input事件，绑定关键字 bindinput

2、如何获取 输入框的值？

通过事件源对象来获取即通过e.detail.vlaue

3、把输入框的值 赋值到data中

两个错误写法：

  1. this.data.num=e.detail.value

  2. this.num=e.detail.value

正确的写法：

this.setData({

num:e.detail.value

})

4、需要加入一个点击事件，在之前做网页时，用bindonclick，现在，我们就就用bindtap

  • bindtap

  • 无法在小程序当中的事件中直接传参；即不能够写<button bindtap="handletap（-1）"></button>

  • 通过自定义属性的方法传递参数

  • 事件源中获取 自定义属性

通过以上三步，在界面中输入的数据下面会由一行跟着变化的数字。在右下角菜单栏中的AppData 中num的值也会跟着改变。

1中存在的问题：

  • 我们写到了e，这里会有警告，记得手动编译。

  • 如何获取输入框中的值，通过事件源对象来获取，可以参照下图：

  • 每次输入一位数字，他都组合成一个新的数，例如先输入1，再输入2，控制台就会有两个数，一个是1，一个是12。具体可参照下图：

那让我们看一下效果图吧！

需要实现的页面如下图：

 代码参考：

<!--pages/demo03/demo03.wxml-->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap"data-operation="{{1}}">+</button>
<button bindtap="handletap"data-operation="{{-1}}">-</button>
<view>{{num}}</view>
​
// pages/demo03/demo03.ts
Page({
  data: {
    num:100
  },
  // 输入框的input事件的执行逻辑
  handleInput(e){
    // console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  // 加减按钮的事件
  handletap(e){
    // console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num+operation
    })
  }
  ,......
​

6.2、特别注意：（对于6.1的总结）

  1. 绑定事件时不能带参数，不能带括号 以下是错误的写法

    <input bindinput="handleinput(100)"/>

  2. 事件传值，通过标签自定义属性的方式和value

    <input bindinput="handleinput" data-item="100"/>

  3. 事件触发时获取数据

    handleinput:function(e){
//{item:100}
console.log(e.currentTarget.dataset)
//输入框的值
console.log(e.detail.value);
}

解析：以上界面是由在page.ts中写 以下代码展现出来的

//加减按钮的事件
handletap(e){
console.log(e)
}

我们可以看这个currentTarget属性，里面有dataset，则属性名就是dataset.operation

未晞~
关注
专栏目录
小程序学习（一）
qm_qm的博客
08-24 500
小程序学习-目录详情以及基础 目录详情 小程序目录主要包含以下几个：app.js、app.json、页面组成文件（js、wxml、wxss、json） app.json app.json为全局配置文件 1.pages配置小程序中可应用的页面，数组第一个为初始化页面； 2.window配置小程序全局页面上的导航栏背景、文字样式等； 3.tabBar配置小程序下方选项卡， pagepath为页面路径，text为选项卡内容，iconpath为未选中的图标，selecticonpath为选中时的图标；tabBar位
【微信小程序】小程序知识补充篇
weixin_62542181的博客
08-25 5844
本文主要讲解了微信小程序中的下拉刷新，上拉触底，自定义编译模式设置，生命周期补充，wxs初识
小程序学习
09-13
该小程序里包含轮播， 通告栏，toast等功能，让你灵活使用flex弹性布局，有效利用Iview-Weapp来使页面布局功能实现更加方便快捷。
零基础入门微信小程序开发
热门推荐
GitChat
07-03 34万+
本课程是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。
【微信小程序丨第一篇】初识微信小程序开发
weixin_53863933的博客
10-23 2260
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
【微信小程序丨第二篇】小程序的基本目录结构与文件作用剖析
weixin_53863933的博客
10-25 5608
的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。⼩程序框架提供了⾃⼰的视图层描述语⾔，以及 JavaScript ，并，让开发者能够专注于数据与逻辑。
【微信小程序丨第三篇】小程序的基础知识储备
weixin_53863933的博客
10-26 1万+
微信小程序在无论在功能、文档及相关支持方面，都是优于前面几种微信账号类型，它提供了很多原生程序才有的接口，使得我们的小程序在很多方面突破H5页面应用的限制，更加接近原生程序的功能，因此微信小程序具有很大的前景想象力。
微信小程序学习（一）
F2691898750的博客
07-23 695
小程序的生命周期分为全局与页面，它们的环境都是类，全局的引入名叫做App，页面的叫做Page，它们都是提前封装引入,可以直接使用，在其中进行逻辑代码写入。场景值的出现是因为用户通过不同方式进入需要呈现不同页面的需求存在，因而出现的属性，开发者可以通过场景值的不同来进行不同的页面渲染或页面跳转。在app.js中进行定义的方法与属性当然可以在其本身使用，因为在app.js中定义，它们被称为全局属性，当然可以在项目中的其他页面中使用。项目私有配置文件，其中的配置优先于project.config.json。...
小程序学习--1
mjzhang1993的博客
01-13 2428
小程序学习–1简介 微信小程序就是一个类似 RN 的轮子，可以快速开发，有一定的适用场景，但是也有其局限性， 适合于 低频 但重要的需求 微信小程序提供了什么？ 底层API 和 组件 微信小程序官方文档 开发工具的使用 点击下载官方小程序开发工具 安装后点击添加项目 选择无AppId(基本上不影响开发) 填写项目名称和项目目录，注：新建文件夹可以用来创
微信小程序基础Day01
weixin_51494148的博客
01-02 1484
小程序开发的区别 小程序运行在微信环境 小程序无法调用DOM和BOM的API 但是小程序可以调用微信环境提供的一些API 地理 定位 扫码 支付 … 小程序开发模式: 申请小程序开发账号 安装小程序的开发者工具 创建和配置小程序项目 微信开发者工具的安装和使用 安装: 下载最新版本: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 小程序代码的构成 项目的基本组成结构 -1 pages用来存放所有小程序的页面，
小程序学习--3
mjzhang1993的博客
01-13 1994
小程序学习–3 组件说明 基本参照官方文档 组件简介 组件是视图层的基本组成单元（写在wxml中的标签），自带一些功能和微信风格的样式 共同属性 所有组件都有的属性id class style hidden data- bind*/catch* 组件详解1.view 视图容器 相当于 HTML的div <view class="view" hover="{{t
小程序学习（二）
weixin_45515107的博客
03-14 1029
1、WXML模板语法-数据绑定 1.1、数据绑定的基本原则 在data中定义数据 在WXML中使用数据 1.2、在data中定义页面的数据 在页面对于的.js文件中，把数据定义大data对象中即可： 1.3、Mustache语法的格式 把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为： 1.4、Mustache语法的应用场景 应用场景如下： 绑定内容 绑定属性 运算（三元运算、算术运算等） 1.5、动态绑定内容 页面内容：
小程序学习从入门到熟练教程
qq_29194615的博客
04-18 1826
资源已上传百度网盘 前言： 小程序学习起来还是比较简单的，算是比较容易入门的一行。由于移动端的发展，人们现在普遍依赖手机，而手机里面玩的最多的就属微信了。总体来说小程序开发需求量还是挺大的。以下资源送给不想去培训班，却想通过自己的努力自学找到工作或是转行的同学。 视频教程 源码案例 工具集合 源码案例 视频教程部分 第一阶段、微信小程序小白全套视频教程 第二阶段、微信小程序进阶全套视频教程 第三阶段、微信小程序高手全套视频教程 链接：ht...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值