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


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 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
微信小程序中使用 async/await的方法实例分析
May 06 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP连接access数据库
2015/03/27 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
不安全的常用的js写法
2009/09/15 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
详解js的六大数据类型
2016/12/27 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
详解Python 函数如何重载?
2019/04/23 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
幼师自我鉴定范文
2013/10/01 职场文书
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
成考报名单位证明范本
2014/01/16 职场文书
主题酒店策划书
2014/01/28 职场文书
会计专业自荐书
2014/07/08 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
党委领导班子整改方案
2014/09/30 职场文书
六五普法宣传标语
2014/10/06 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
入党介绍人考察意见
2015/06/01 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
如何获取numpy array前N个最大值
2021/05/14 Python
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL