微信小程序入门day1-1
开始前的准备
小程序的开发有两样东西必不可少,一个是小程序开发的技术文档;还有一个就是小程序的开发者工具。
开发者工具:小程序开发者工具下载地址
大家可以根据自己电脑的操作系统来下载对应的稳定版安装包进行安装。就和我们写Word、PPT文档要用Office的软件一样,我们要在开发者工具上多多动手,技术才能掌握的更加真切。
技术文档:官方小程序技术文档
技术文档了解大致的结构即可,先按照步骤学完之后再来看也不迟。官方的小程序技术文档过于全面而且详细。
多看技术文档和多用开发工具也是我们学习其他编程语言或技术最为重要的两点,凡是脱离技术文档和开发工具看视频、看文章以及搜集再多的资料都是舍本求末的错误做法,而这也是很多初学者的一个通病。
值得注意的是小程序的开发功能更新非常频繁,很多网上的教程内容都比较过时,而只有技术文档才是同步最新的。无论你是初学者还是高手,技术文档都是我们技术开发的基础与落脚点,常读常新。
注册微信小程序
小程序的注册非常方便,打开小程序注册页面,按照要求填入个人的信息,验证邮箱和手机号,扫描二维码绑定你的微信号即可,3分钟左右的时间即可搞定。
注册页面:小程序注册页面
注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱哦,也就是需要你使用一个其他邮箱才行。
当我们注册成功后,就可以自动登入到小程序的后台管理页面啦,如果你不小心关掉了后台页面,也可以点击小程序后台管理登录页进行登录。
后台管理页:小程序后台管理登录页
小程序和微信公众号的登录页都是同一个页面,他们会根据你的不同的注册邮箱来进行跳转。
进入到小程序的后台管理页后,点击左侧菜单的开发进入设置页,然后再点击开发设置,在开发者ID里就可以看到AppID(小程序ID),这个待会我们有用。
注意小程序的ID(AppID)不是你注册的邮箱和用户名,你需要到后台查看才行哦~
到此处开始前的准备已完成
新建一个模板小程序
安装完开发者工具之后,我们使用微信扫码登录开发者工具,然后使用开发者工具新建一个小程序的项目
项目名称:这个可以根据自己的需要任意填写,可以是中文;
目录:大家需要先在电脑上新建一个空文件夹,然后选择这个空文件夹;
AppID:就是之前我们找到的AppID(小程序ID)(也可以点击右边的下拉框,下拉选择AppID)
开发模式为小程序
后端服务选择不使用云服务,注意为了教学的需要,先选择不使用云服务
语言为JavaScript
点击新建确认之后就能在开发者工具的模拟器里看到一个简单的Hello World模板小程序,在编辑器里看到这个小程序的源代码。
分别点击开发者工具工具栏上的模拟器、编辑器、调试器,以及下面的手机下拉框、显示百分比,看看有什么效果。找到开发者工具的菜单栏,在项目菜单栏里找到查看所有项目,在设置菜单栏里找到外观设置,切换一下主题、调试器主题(深色、浅色)。
接下来,我们点击开发者工具的工具栏里的预览图标,就会弹出一个二维码,使用你的手机微信扫描这个二维码就能在微信里看到这个小程序啦。以后我们要自己开发一个小程序都可以按照上面的操作新建一个模板小程序,然后在这个的基础上修改开发。
如果你没有使用微信登录开发者工具,以及你的微信不是该小程序的开发者是没法预览的哦。这个Hello World模板小程序非常简单,但是它的文件结构却是完整的。
文件结构与页面组成
文件结构
- app.json:小程序的公共设置,可以对小程序进行全局配置,决定页面文件的路径、窗口表现、设置多 tab 等;
- app.wxss:小程序的公共样式表,可以配置整个小程序的文字的字体、颜色、背景,图片的大小等样式;
- app.js:小程序的逻辑(这个可以先放着,不用管)
- pages文件夹:这里存放着小程序的所有页面,展开pages文件夹就可以看到有index和logs两个页面文件夹;
小程序的根目录
├── image
│ ├── icon-tab1.png
│ ├── icon-tab1-active.png
├── pages
├── utils
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json
页面组成
在每一个页面文件夹里都有四个文件,这四个文件的名称都是一样的,它们分别为:
- json文件,和上面的app.json作用基本相同,只是app.json控制的是整个小程序的设置,而页面的json文件只控制单个页面的配置(因为有时候全局配置就够用了,所以页面配置有时候是空的);
- wxml文件,小程序的页面结构,文字、图片、音乐、视频、地图、轮播等组件都会放在这里;
- wxss文件,小程序的页面样式,和app.wxss一样是控制样式,而页面的wxss文件是控制单个页面的样式;
- js文件,这个是控制小程序页面的逻辑(这个可以先放着,不用管)
app.json可以对整个小程序进行全局配置,而配置的依据就需要我们参考技术文档了。
说直白点,把wxml当成xml文件,wxss当成css文件
微信小程序入门day1-1相关推荐
- 微信小程序入门二:底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- 微信小程序入门---01
目录 微信小程序入门 一.小程序简介 二.第一个小程序 二.小程序代码的构成 三.WXML模块 四.WXSS 样式 五.JS 逻辑交互 六.组件 七.API 八.WXML 模板语法 - 数据绑定 九. ...
- 微信小程序入门之常用组件(04)
常见组件 重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等 一.vi ...
- 微信小程序入门案例-会议邀请函
微信小程序入门案例-会议邀请函 涉及内容:地图 目录结构: pages\index\index.wxml <view class="box"><view clas ...
- 【零基础微信小程序入门开发一】小程序介绍及环境搭建
什么是小程序? 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打 ...
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
- 微信小程序入门七登录注册
上一章介绍了 微信小程序入门六本地缓存和搜索 ,这章介绍小程序的登录注册页面.主要有表单的验证,错误信息的提示,form表单的取值,get / post 请求 ,反馈交互提示框,页面跳转 以及 页面U ...
- 微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信 然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
- 从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
最新文章
- ​简单四步,快速判断真菌是否成功侵染宿主植物
- 汇编语言笔记17-使用BIOS进行键盘输入和磁盘读写
- 《快学Scala》第二章 控制结构和函数
- Access 导出各种格式文件
- Scala教程之:PartialFunction
- 从数组随机抽取5个不重复_Power Query 如何保证随机抽取元素不重复
- 【飞秋】关于结构体和结构体指针的P-INVOKE
- UDP聊天工具的实现
- Ps提示“脚本错误-50出现一般Photoshop错误,如何解决?
- Linux下的目录简介
- SVM支持向量和逻辑回归的decision_function用法详解
- 21天学通python 第2版_21天学通Python(第2版)
- 行驶证核验-行驶证核验查询-行驶证核验接口-行驶证核验查询接口-行驶证核验api接口-行驶证核验api
- 阿里云视频直播开发----java
- Python3.9,寻找质数,埃拉托色尼算法
- 微信开发者工具创建vue项目步骤
- python对象模型_python 实现对象模型
- 如何从零开始搭建自己的博客(通俗易懂)
- IROS 2017观察:机器人研究产业化加速,中国企业如何借力升级?
- [整理]统计数据的可视化——数据的频数分布