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


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 相关文章推荐
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 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 批量查询搜狗sogou代码分享
2015/05/17 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
js判断两个日期是否相等的方法
2013/09/10 Javascript
删除节点的jquery代码
2014/01/13 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python 的 Socket 编程
2015/03/24 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
英文自我鉴定
2013/12/10 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2016年教代会开幕词
2016/03/04 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL