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


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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
js实现筛选功能
Nov 24 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python实现购物车购物小程序
2018/04/18 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
财务会计专业毕业生自荐信
2013/10/02 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
工程建设实施方案
2014/03/14 职场文书
教研处工作方案
2014/05/26 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android
win7配置本地ftp服务器的图文教程
2022/08/05 Servers