微信小程序的入门笔记（一）

【初学微信小程序】

一、微信小程序是什么？

小程序呢有很多种，微信小程序呢只是其中之一，英文名：Wechat Mini Program，它是一种不需要下载安装即可使用的应用，相对于vue开发呢微信小程序更加的简单和高效，而且安全。2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

二、小程序的开发使用流程？

1.注册微信小程序的账号
我们可以直接到百度搜索到官网上搜索 ‘微信小程序官网’，进行注册，并且下载我们的开发工具《微信开发者工具》，或者可以同过以下链接进行注册。

`注册网址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN`操作步骤 : 帐号信息   ->  邮箱激活   ->   信息登记注册成功以后：找到 AppID(小程序ID)    进入小程序后台找到开发选项复制出来我们还可以在小程序后台添加成员管理，方便协作开发

2.微信开发者工具的下载：

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.打开微信开发者工具创建微信小程序

 微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。
全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号程序调试主要有三大功能区：1、模拟器：模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。2、调试工具调试工具分为 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel3、小程序操作区微信小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从微信小程序中回到聊天窗口，会触发一个微信小程序被设置为后台的api。

4.利用小程序开发的又优势：

1. 快速的加载
2.更强大的能力
3.原生的体验 （Native体验，即android,ios的App体验）
4.易用且安全的微信数据开放
5.高效和简单的开发

5.小程序和H5开发的区别

 <1、不一样的运行环境：H5仅能借助浏览器实现启动，但小程序虽然包含H5技术，但在运行环境方面与H5不同，它基于解析器得以运行，结合自定义的开发语言标准，其性能更是有了长足的进步。简单讲小伙伴们可以利用浏览器打开H5网页，运用微信平台打开小程序。<2、不一样的成本：在开发方面，很多企业借助各类开发软件针对H5开发，这种开发需要结合多方面技术实现，因此相对比较复杂，开发的成本也是比较高的。然而小程序则不一样，开发完全借助官方下载的开发工具即可实现，小程序开发价格相对低廉很多。<3、不一样的系统级权限：从程序本身来看，这个小程序能得到更多的系统权限，而对于H5则不同，权限很低。很简单举几个例子，比如网络当前的状态，甚至是一些数据的缓存应用等，都能够得以与小程序进行连接。<4、 不一样的运行状态现在的人们总是强调人性化，提高用户的体验感，这一点就被小程序抢先了，对比H5，小程序拥有更为流畅的使用速度，多使用过小程序和H5的客户，都很印象深刻，前者的打开速度要快上很多，利用一些软件就也可以测试出两者的差距。我们举例来说，如果我们打开H5，就相当于打开一个网页，页面需要加载，因此打开速度相对较慢。而对于小程序则不同，该应用程序完全借助微信运行，根本不需要像浏览器加载的操作，就可以直接打开。此外，H5页面之间的切换也需要时间，但小程序不用担心这些困难。<5、H5:ECMA(ES5,Es6),DOM,BOM1.有完整的的DOM API和BOM API。例如：getEleentById,window,location2.网页开发渲染线程和脚本线程是互斥的微信小程序：1.缺少相关的DOM API和BOM API。例如：getEleentById,window,location2.网页开发渲染线程和脚本线程是二者是分开的

6、小程序的开发目录结构：

 *pages:平时开发页面的目录 相当于vue中的src目录*utils:存放平时开发时常用的工具函数*app.js:小程序项目的逻辑入口 相当于vue中的main.js *app.json:是小程序的全局配置文件，会影响每个页面的配置*app.wxss:是小程序的全局样式,会影响每个页面的样式*project.config.json:项目的配置文件（一般不需要改动）*sitemap.json:小程序的搜索蜘蛛（一般不需要）

index.js:页面的JS逻辑相当于H5中的JS
index.json:指当前页面的配置文件（注意：只能使用app.json中window的各种配置）
index.wxml:指当前页面模板相当于H5中的html

小程序常用标签：

    1-view:相当于H5中的div2-image:插入图片，相当于H5中的img3-text:嵌入文本  相当于H5中的span（它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)4-block:逻辑包裹标签，最终不渲染到页面中 相当于vue中template标签5-index.wxss:指页面的样式    相当于H5中的css6-button 这个是按钮组件。7-input 这个是输入框组件。8-navigator 这个是导航组件。

7.如何给小程序添加底部的tabbar

微信文档的链接地址：

 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

参考tabBar部分的配置即可

操作步骤：

打开app.json，添加tabBar选项，配置代码如下：

{......"tabBar":{"custom":true,//true,表示开启自定义tabbar"color":"#000",   //未选中的文字颜色"selectedColor":"#d4237a",  //选中的文字颜色"list":[{"text":"首页",  //tabbar显示文字"pagePath":"pages/index/index",  //页面路径"iconPath":"/images/home.png", //未选中的icon"selectedIconPath":"/images/home_active.png"  //选中的icon},{"text":"日志","pagePath":"pages/logs/logs","iconPath": "/images/my.png","selectedIconPath":"/images/my_active.png"}]}...
}

注意：设置tabBar最多5项，最少2项

自定义的tabBar:

 参考链接地址：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

三、微信小程序常用的指令

 1.遍历数组：wx:for  相当于vue中的v-for注： index:代表遍历的索引，item:代表遍历每一项如果不改变index和item的名子，则需要设置：更改索引：wx:for-index="idx"更改每一项wx:for-item="ite"为了提高遍历性能，通常在遍历时加上wx:key,类似于vue中的key2.条件渲染：wx:if:条件true渲染标签，false不渲染，类似于vue中的v-ifhidden:条件true隐藏标签，false显示标签,类似于vue中的v-show

微信小程序的入门笔记（一）相关推荐

微信小程序开发入门笔记
1. 编写目的关于微信小程序开发界面绘制方面的笔记. 2. 资源推荐微信小程序开发文档:前往文档图标库:非常好用的图标库,并且可以在线选择颜色大小等.前往iconfont 微信小程序UI库(iV ...
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐
text-align水平对齐语法 text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 西方语言都是从左向右读,所有 text-align 的默认值是 left.文 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
[免费分享]微信小程序从入门到精通视频教程 [8.2G]
获取方式公众号回复 wechat0423 获取下载地址, 好书推荐.视频分享,与您一起进步目录:/微信小程序从入门到精通视频教程 [8.2G] ┣━━课件资料demo [7.7M]┃ ┣━━表单组 ...
视频教程-微信小程序从入门基础(第一季)-PHP
微信小程序从入门基础(第一季) 多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程 ...
视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门主讲人介绍沁修,葡萄藤技术总监项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结直播录屏版 https://v.qq.com/x/page/n ...