【初学微信小程序】
一、微信小程序是什么?
小程序呢有很多种,微信小程序呢只是其中之一,英文名: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以及WxmlPannel
3、小程序操作区
微信小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从微信小程序中回到聊天窗口,会触发一个微信小程序被设置为后台的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,BOM
1.有完整的的DOM API和BOM API。例如:getEleentById,window,location
2.网页开发渲染线程和脚本线程是互斥的
微信小程序:
1.缺少相关的DOM API和BOM API。例如:getEleentById,window,location
2.网页开发渲染线程和脚本线程是二者是分开的
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中的div
2-image:插入图片,相当于H5中的img
3-text:嵌入文本 相当于H5中的span(它的特点就是在没有其他样式影响的情况下,不会独占一行,宽和高由内容撑开,这个时候你设置宽高是没有用的)
4-block:逻辑包裹标签,最终不渲染到页面中 相当于vue中template标签
5-index.wxss:指页面的样式 相当于H5中的css
6-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中的key
2.条件渲染:
wx:if:条件true渲染标签,false不渲染,类似于vue中的v-if
hidden:条件true隐藏标签,false显示标签,类似于vue中的v-show