详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)


Posted in Javascript onJuly 21, 2020

(一) 准备工作

(1) 登录注册

注册账号:这就不谈了,只需要注意使用一个全新的邮箱,别之前注册过公众号小程序等就可以了

https://mp.weixin.qq.com/wxopen/waregister?action=step1

登录账号:通过邮箱密码登录,亦或者绑定微信后使用扫码也是可以的

https://mp.weixin.qq.com/

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

(2) 获取 APPID

登录后,在开发入门的阶段有一个比较重要的内容需要了解,那就是 APPID,很好理解,就是这个小程序的唯一标识,就类似我们的身份证,登录后首页左侧栏选择【开发】,跳转后,选择【开发设置】就可以看到我们的 APPID

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

这个 APPID 要记好哈,在刚开始学习的时候,就会使用到

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

(3) 下载工具

在官网选择一个合适的版本进行下载,这就是我们小程序的编译器,这里我选择的是开发版,不过选择稳定版也是可以的,针对入门并没有太大的区别,不过稳定版可能出现的小毛病会少一些

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装好后,直接提示扫码登录,接着就是点击左侧【小程序】,然后点击右侧【新建】(一个大加号)填写一些基本的信息

  • 项目名称和目录:自己看着弄就可以了
  • APPID:之前页面中找到的 APPID 在这个时候就可以用的上了,虽然你使用测试号也是可以进入的,到底后面还是要用自己的 ID 的。
  • 开发模式:小程序
  • 后端服务:不使用云服务,前面还是以学习小程序本身为主,不使用此选项
  • 语言:JavaScript 和 Typescript,根据自身的熟悉程序选择即可

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

新建后,第一个小程序就完事了哈~

(二) 初识小程序

(1) 界面总览

下面的区域就是一个初始化新建好的项目界面了,图片中标的很清楚,每一块的具体内容,第一次创建项目时,也可以在设置的通用设置中将默认的的工作区以及主题(浅色还是深色)根据自己的需要修改

说明:直接在小程序官方的工具中编写代码也可以,不过我个人选择配合 vscode 或 sublime 进行代码的编辑,在微信官方开发工具或者那个查看结果以及控制台的一些信息

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

(2) 文件类型

与传统的网页开发有一丝小不同,微信小程序重新定义了它的描述语言,例如 wxml、wxss 等,同时还额外提供了一层 JSON 的配置文件

wxml(页面结构文件)

用来书写、构建页面,类似传统网页开发的 HTML

wxss(样式表文件)

用于制定页面样式,从而美化页面,类似传统网页开发的 CSS

js(脚本文件)

用于指定一定页面交互逻辑,就是 Javascript

json(静态数据配置文件)

JSON 格式的配置文件,设置程序的一些配置效果

(3) 结构目录

A:总体介绍

通过官方开发工具或者vscode等其他编辑器,你可以看到,新建一个项目后,会默认生成一个初始化的项目结构,里面含有很多文件,其后缀格式都是我们上面介绍过的

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

下面我们针对一些主要的内容进行一个基本的介绍

├── pages        // 页面文件夹
|	├── index 						 // 首页
│ |	├── index.js				 // 首页逻辑脚本文件
│ |	├── index.json			  // 首页配置文件
│ |	├── index.wxml			 	 // 首页页面结构文件
│ |	├── index.wxss				 // 首页样式文件

|	├── logs 						 // 日志页面
│ |	├── logs.js				 	 // 日志页面逻辑脚本文件
│ |	├── logs.json			  // 日志页面配置文件
│ |	├── logs.wxml			 	 // 日志页面页面结构文件
│ |	├── logs.wxss				 // 日志页面样式文件

|	├── utils 						 // 工具js文件(第三方,可删除)
│ |	├── util.js				 	 // 日志页面逻辑脚本文件

│ ├── app.js						 // 项目的全局脚本文件
│ ├── app.json					 // 项目的全局配置文件
│ ├── app.wxss					 // 项目的全局配置文件
│ ├── project.config.json			 // 项目的开发者工具的配置
│ ├── sitemap.json				 // 索引配置文件

具体的一些例如 wxml wxss 等的用法,会在后面提到,这里我们还要提一下两个内容:

A:针对说明

app.js:项目的入口文件,用来创建应用程序的对象,处理程序的生命周期

app.json:项目全局的配置文件,涉及到了页面的路径,界面/窗口 的表现时间,网格超时的时间,还有小程序底部的 tab 等等,还是非常重要的,初始化新建项目后,可以看到如下pages 字段和 windows 字段

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}
  • pages 字段,是关于页面路径的,也就是给客户端说明出你小程序页面到底在哪里
  • window 字段,对应 页面的颜色、标题等等
  • tabbar 字段,底部 tab 栏(切换页面)

贴一段官网关于tabbar的说明(官网的说明确实很可!):

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

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色,仅支持十六进制颜色
selectedColor HexColor tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor HexColor tab 的背景色,仅支持十六进制颜色
borderStyle string black tabbar 上边框的颜色, 仅支持 black / white
list Array tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
position string bottom tabBar 的位置,仅支持 bottom / top
custom boolean false 自定义 tabBar,最低需要 2.5 版本

详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)

而一般我们想要设置出常见的效果就会选择使用 list 进行配置

属性 类型 必填 说明
pagePath string 页面路径,必须在 pages 中先定义
text string tab 上按钮文字
iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。
selectedIconPath string 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。****

给大家举个例子,书写的格式就是这样的,别忘了制定了 tabbar 一定要有在pages中设置对应的页面哦

"tabBar": {
 "color": "#999",
 "selectedColor": "#ff2d4a",
 "backgroundColor": "#fafafa",
 "position": "bottom",
 "borderStyle": "black",
 "list": [
  {
  "pagePath": "pages/index/index",
  "text": "首页",
  "iconPath": "icons/home.jpg",
  "selectedIconPath": "icons/home.jpg"
  },
  {
  "pagePath": "pages/user/index",
  "text": "我的",
  "iconPath": "icons/my.jpg",
  "selectedIconPath": "icons/my.jpg"
  }
 ]
 },

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.jsonwindow 中相同的配置项。同样的,也有很多配置内容,看一下官网就可以了

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

结尾

到此这篇关于微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)的文章就介绍到这了,更多相关微信小程序入门内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
简单的js表格操作
Sep 24 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
vue 清空input标签 中file的值操作
Jul 21 #Javascript
Vue-resource安装过程及使用方法解析
Jul 21 #Javascript
vue中destroyed方法的使用说明
Jul 21 #Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 #Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 #Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 #Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 #Javascript
You might like
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
Python实现多进程的四种方式
2019/02/22 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python Process多进程实现过程
2019/10/22 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
Golang入门之计时器
2022/05/04 Golang