微信小程序入门讲解【超详细】

一. 微信小程序简介

1.1 什么是小程序

  1. 2017年度百度百科十大热词之一

  2. 微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小， 下载速度很快，用户感觉不到下载的过程 )

  3. 限制：同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。

  4. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

1.2 小程序可以干什么

  1. 同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用

  2. 通过扫一扫或者在微信搜索即可下载

  3. 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选

  4. 连接线上线下

  5. 开发门槛低， 成本低

二. 小程序的开发

2.1 注册账号（已经有账号的，这步就可以忽略了）

首先进入微信公众平台（https://mp.weixin.qq.com/）注册账号，点击”立即注册“按钮，账号类型选择小程序即可。

进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录小程序后台，我们可以在菜单 “开发”-“开发管理”-“开发设置” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

2.2 安装开发工具

前往微信开发者工具下载页面（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html） ，根据自己的操作系统下载对应的安装包进行安装。这里我下载的是稳定版的

​  

安装完成后，打开开发者工具，会出现一个二维码，用微信扫码登录即可使用。

三. 小程序的结构

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 "不使用云服务" （注意: 你要选择一个空的目录才可以创建项目）

点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

​

出现自己的微信头像，那么这个小程序就是创建成功了。

3.1 小程序目录结构

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

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

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

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

文件类型必需作用
js是页面逻辑
wxml是页面结构
json否页面配置
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html否页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。  

3.2 小程序代码构成

项目里边生成了不同类型的文件:

  1. .json 后缀的 JSON 配置文件

  2. .wxml 后缀的 WXML 模板文件

  3. .wxss 后缀的 WXSS 样式文件

  4. .js 后缀的 JS 脚本逻辑文件

接下来我们分别看看这4种文件的作用。

1. JSON配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

1.1 小程序配置app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。项目里边的 app.json 配置内容如下：

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

简单说一下这个配置各个项的含义:

  1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

  2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。  

1.2 工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

1.3 页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

2. JSON 语法

这里说一下小程序里JSON配置的一些注意事项。

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

  1. 数字，包含浮点数和整数

  2. 字符串，需要包裹在双引号中

  3. Bool值，true 或者 false

  4. 数组，需要包裹在方括号中 []

  5. 对象，需要包裹在大括号中 {}

  6. Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

3. WXML  

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容:

<!--index.wxml-->
<view class="container"><view class="userinfo"><block wx:if="{{canIUseOpenData}}"><view class="userinfo-avatar" bindtap="bindViewTap"><open-data type="userAvatarUrl"></open-data></view><open-data type="userNickName"></open-data></block><block wx:elif="{{!hasUserInfo}}"><button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button><button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><view wx:else> 请使用1.4.4及以上版本基础库 </view></block><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

  1. 标签名字有点不一样

    往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。

    从上边的例子可以看到，小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

  2. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

    在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

    小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。

    WXML 是这么写 :

    <text>{{msg}}</text>

    JS 只需要管理状态即可:

    this.setData({ msg: "Hello World" })

    通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

4. WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

  1. 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

  2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

  3. 此外 WXSS 仅支持部分 CSS 选择器

5. JS 逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view> 
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({clickMe: function() {this.setData({ msg: "Hello World" })}
})

响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件 。

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。

四. 案例展示

user.js

// pages/user/user.js
Page({/*** 页面的初始数据*/data: {userName:'派大星'},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

user.json

{"usingComponents": {},"navigationBarTitleText": "用户界面"
}

user.wxml

<!--pages/user/user.wxml-->
<text>pages/user/user.wxml</text>
<view class="container"><view class="userinfo">用户姓名：{{userName}}</view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

user.wxss

/* pages/user/user.wxss */
.userinfo {font-size: 30px;display: flex;flex-direction: column;align-items: center;color: rgb(201, 46, 46);
}

展示效果

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/105023.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

如何创建自定义前端组件？

如何创建自定义前端组件？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
VScode运行C/C++

VScode运行C/C++

VScode运行C/C VScode的安装这里不讲 一、mingw64的下载 二、VS code打开文件夹与创建C文件 ----------------这一步给萌新看&#xff0c;有C和VScode的基础可跳过---------------- 1.创建一个文件夹 2.vscode打开刚刚创建的文件夹 3.新建文件&#xff0c;在输入文件名1.c后…
阅读更多...
Unity实现摄像机向屏幕中间发射射线射击物体

Unity实现摄像机向屏幕中间发射射线射击物体

1.创建一个准星放在屏幕中间 外部找个PNG透明图&#xff0c;拖到Unity文件夹&#xff0c;右上角改成精灵sprite2d 2.添加到UI画布 3.写脚本 首先&#xff0c;我们需要引入一些 "工具"&#xff0c;就像我们在玩游戏时要先下载游戏客户端一样。这里的 "工具&quo…
阅读更多...
iOS- flutter flavor 多环境Configurations配置

iOS- flutter flavor 多环境Configurations配置

一、点击PROJECT的Runner&#xff0c;选择Info选项&#xff0c;在Configurations下方的号添加不同环境的配置&#xff0c;如下图&#xff1a; 二、选择TAGETS的Runner项目&#xff0c;选择Build Settings选项&#xff0c;在输入框输入package&#xff0c;为不同环境配置相应的…
阅读更多...
UML组件图综合指南：设计清晰、可维护的软件系统

UML组件图综合指南：设计清晰、可维护的软件系统

介绍&#xff1a; UML&#xff08;Unified Modeling Language&#xff09;组件图是软件系统设计中的重要工具&#xff0c;用于描绘系统的物理结构和组件之间的关系。在软件工程中&#xff0c;通过创建清晰的组件图&#xff0c;团队能够更好地理解系统的模块化结构和组织关系&a…
阅读更多...
二十四、【参考素描三大面和五大调】

二十四、【参考素描三大面和五大调】

文章目录 三种色面(黑白灰)五种色调 这个可以参考素描对物体受光的理解&#xff1a;素描调子的基本规律与素描三大面五大调物体的明暗规律 三种色面(黑白灰) 如下图所示&#xff0c;我们可以看到光源是从亮面所对应的方向射过来的,所以我们去分析图形的时候&#xff0c;首先要…
阅读更多...
C# excel操作

C# excel操作

使用库 Spire.Xls 下载 示例数据 代码示例 1.删除列 代码 private static void DeleteExcelColumns1(string excelPath) {if (excelPath.Length 0) {Console.WriteLine("excel文件路径为空");}else{Console.WriteLine("删除列方法1&#xff1a;保留第一列&…
阅读更多...
好的摄影师都会iPhone 8和iOS 11的这三项功能

好的摄影师都会iPhone 8和iOS 11的这三项功能

众所周知&#xff0c;苹果的手机像素一直处于智能手机摄影的前沿&#xff0c;在即将到来的九月&#xff0c;苹果公司准备证明他拥有最好的相机技术。 虽然我们还不知道iPhone 8摄像头的具体细节&#xff0c;如几百万像素、光学变焦是多少&#xff0c;但我们确实知道苹果正在给i…
阅读更多...
Webmin（CVE-2019-15107）远程命令执行漏洞复现

Webmin（CVE-2019-15107）远程命令执行漏洞复现

漏洞编号 CVE-2019-15107 webmin介绍 什么是webmin Webmin是目前功能最强大的基于Web的Unix系统管理工具。管理员通过浏览器访问Webmin的各种管理功能并完成相应的管理动作http://www.webmin.com/Webmin 是一个用 Perl 编写的基于浏览器的管理应用程序。是一个基于Web的界面…
阅读更多...
Rust入门基础

Rust入门基础

文章目录 Rust相关介绍为什么要用Rust&#xff1f;Rust的用户和案例 开发环境准备安装Rust更新与卸载Rust开发工具 Hello World程序编写Rust程序编译与运行Rust程序 Cargo工具Cargo创建项目Cargo构建项目Cargo构建并运行项目Cargo检查项目Cargo为发布构建项目 Rust相关介绍 为…
阅读更多...
Spring Boot自动加载

Spring Boot自动加载

问&#xff1a;自动装配如何实现的&#xff1f; 答&#xff1a;简单来说就是自动去把第三方组件的Bean装载到IOC容器中&#xff0c;不需要开发人员再去写Bean相关的配置&#xff0c;在springboot应用里面只需要在启动类上去加上SpringBootApplication注解&#xff0c;就可以去实…
阅读更多...
计算机毕业设计选什么题目好？springboot 幼儿园管理系统

计算机毕业设计选什么题目好？springboot 幼儿园管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…
阅读更多...
简单使用 Hugo 博客

简单使用 Hugo 博客

之前用过 hugo&#xff0c;本次来分享一波&#xff0c;确实简单好用&#xff0c;可以持续使用&#xff0c;尤其是喜欢 GO语言的同学 hugo Hugo是一个用 Go语言 编写的静态网站生成器&#xff0c;可以快速地生成高效、安全和易于管理的静态网站。Hugo具有速度快、可定制性强、…
阅读更多...
Hydra参数

Hydra参数

kali的hyda参数 参数&#xff1a; hydra [[[-l LOGIN|-L FILE] [-p PASS|-P FILE]] | [-C FILE]] [-e ns][-o FILE] [-t TASKS] [-M FILE [-T TASKS]] [-w TIME] [-f] [-s PORT] [-S] [-vV] server service [OPT] -R 继续从上一次进度接着破解。 -S 采用SSL链接。 -s PORT 可通…
阅读更多...
【C++进阶】：特殊类的设计

【C++进阶】：特殊类的设计

特殊类的设计 一.设计一个类不能被拷贝二.设计一个类只能在堆上创建对象三.设计一个类只能在栈上创建4.设计一个类不能被继承五.设计一个类只能有一个对象(单例模式) 一.设计一个类不能被拷贝 拷贝只会放生在两个场景中&#xff1a;拷贝构造函数以及赋值运算符重载&#xff0c…
阅读更多...
leetcode做题笔记173. 二叉搜索树迭代器

leetcode做题笔记173. 二叉搜索树迭代器

实现一个二叉搜索树迭代器类BSTIterator &#xff0c;表示一个按中序遍历二叉搜索树&#xff08;BST&#xff09;的迭代器&#xff1a; BSTIterator(TreeNode root) 初始化 BSTIterator 类的一个对象。BST 的根节点 root 会作为构造函数的一部分给出。指针应初始化为一个不存在…
阅读更多...
vue补充继上一篇

vue补充继上一篇

组合式API-reactive和ref函数 1.reactive() 作用&#xff1a;接受对象类型数据的参数传入并返回一个响应式的对象 1.从vue包中导入reactive函数 2.在<script setup>中执行reactive函数并传入类型为对象的初始值&#xff0c;并使用变量接受返回值。 2.ref() 作用&am…
阅读更多...
第18篇ESP32platformio-arduino框架-ili9488-3.5lcd显示时间天气

第18篇ESP32platformio-arduino框架-ili9488-3.5lcd显示时间天气

第18篇ESP32platformio-arduino框架-ili9488-lcd显示时间天气 第18篇esp32ili9488lcd显示时间天气 连接方法&#xff1a; 修改WIFI&#xff1a; 关键代码 void setup() {Serial.begin(115200);WiFi.mode(WIFI_STA);WiFi.begin(ssid,password);Serial.print("\r\nConnect…
阅读更多...
java中将数组转换成字符串

java中将数组转换成字符串

方法1&#xff1a;使用StringBuilder拼接 基本类型和引用类型兼容 int[] arr {1,2,4,6,9};StringBuilder sb new StringBuilder();for (int i 0; i < arr.length ; i) {if (i!arr.length-1){sb.append(arr[i]",");}else {sb.append(arr[i]);}}System.out.prin…
阅读更多...
Axios 封装

Axios 封装

请注意以下文件夹&#xff1a; utils下的setToken.js 是token封装&#xff08;封装 Token-CSDN博客&#xff09;,service.js 是axios封装。 Axios封装&#xff1a; 1.安装axios 在项目终端下 输入&#xff1a; npm install axios --save 2.在main.js全局引入axios import…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023