襄阳网站建设哪个好,菜鸟教程网官网入口,重庆网站制作建设,wordpress 全屏浮动文章目录 前言微信小程序介绍 一、为什么要学习微信小程序?二、微信小程序的历史创建开发环境1.注册账号2.获取APPID 三、下载微信开发者工具1.创建微信小程序项目2.填写相关信息3.项目创建成功 四、小程序目录结构项目的主体组成结构 总结 前言
微信小程序介绍
微信小程序简称小程序英文名 Mini Program 是一种不需要下载安装即可使用的应用它实现了应用“触手可及”的梦想用户扫一扫或搜一下即可打开应用。 小程序的主要开发语言是 JavaScript 小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言从网页开发迁移到小程序的开发成本并不高但是二者还是有些许区别的。
网页开发渲染线程和脚本线程是互斥的这也是为什么长时间的脚本运行可能会导致页面失去响应而在小程序中二者是分开的分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API进行 DOM 选中和操作。而如上文所述小程序的逻辑层和渲染层是分开的逻辑层运行在 JSCore 中并没有一个完整浏览器对象因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库例如 jQuery、 Zepto 等在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同所以一些 NPM 的包在小程序中也是无法运行的。
网页开发者需要面对的环境是各式各样的浏览器PC 端需要面对 IE、Chrome、QQ浏览器等在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端以及用于辅助开发的小程序开发者工具小程序中三大运行环境也是有所区别的如表所示
运行环境逻辑层渲染层iOSJavaScriptCoreWKWebView安卓V8chromium定制内核小程序开发者工具NWJSChrome WebView
网页开发者在开发网页的时候只需要使用到浏览器并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。 一、为什么要学习微信小程序?
微信有海量用户而且粘性很高在微信里开发产品更容易触达用户开发适配成本低容易小规模试错然后快速迭代跨平台薪资更高
二、微信小程序的历史
2016年1月11日微信之父张小龙时隔多年的公开亮相解读了微信的四大价值观。张小龙指出越来越多产品通过公众号来做因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务所以微信内部正在研究新的形态叫「微信小程序」 需要注意的是之前是叫做「应用号」。 2016年9月21日微信小程序正式开启内测。在微信生态下触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案提供小程序在云端服务器的技术方案。 2017年1月9日微信推出的“小程序”正式上线。“小程序”是一种无需安装即可使用的手机“应用”。不需要像往常一样下载App用户在微信中“用完即走”。 创建开发环境
1.注册账号
访问微信公众平台进行账号的注册。 小程序官方文档 操作步骤如下
点击立即注册 选择微信小程序 填写信息建议使用全新的邮箱没有注册过其他小程序或者公众号的。
2.获取APPID 微信小程序appid是微信小程序的应用标识。appid全称为Application Identification即应用程序标识每个微信小程序都会有有一个原始的appid。它就跟人的身份证号一样是唯一的不会跟其他的小程序编号重复。通过它微信客户端才能确定你的小程序“身份”并使用微信提供的高级接口。而想要获取某个小程序的appid必须要该小程序的开发者或管理者进入后台查看才能获得其它人是无法查看小程序appid的。 操作步骤如下 一、点击开发管理 二、点击开发设置并复制appid 三、下载微信开发者工具
微信开发者工具
1.创建微信小程序项目 2.填写相关信息 3.项目创建成功 四、小程序目录结构
小程序框架提供了自己的视图层描述语言 WXML 和 WXSS 以及 JavaScript 并在视图层与逻辑层间提供了数据传输和事件系统让开发者能够专注于数据与逻辑。小程序定义了四种类型的文件分别用来表达结构、样式、逻辑、配置。
项目的主体组成结构
每个小程序的结构都是由两个主要部分构成主体部分 各个页面。类似于许多框架主体部分主要用于核心的配置各个页面主要用于不同业务场景。 主体部分主要由3个文件构成 app.js小程序项目的入口文件app.json小程序项目的全局配置文件app.wxss小程序项目的全局样式文件 主体部分其它构成如下 pages(目录):用来存放所有小程序页面,所有的页面都以单独的文件夹放在pages目录中utils(目录)用来存放工具性质的模块(例如:格式化事件的自定义模块)project.config.json项目的配置文件sitemap.json:用来配置小程序以及页面是否允许被微信索引common(目录)由开发人员自己创建的样式库里面封装个各种各样的图标样式需要使用可以直接调用这是自己封装创建项目时是没有的components目录由开发人员自己创建的组件库创建项目时是没有的里面封装自己创建组件可以重复利用在相同需求时就可以直接调用自己分装的组件只要传递不动的数据即可可以大大节省时间提高代码的复用。 ## 页面组成结构 主体配置完成之后就是对应业务开发了也就是开发者最常操作的页面。小程序页面设计基本上也是遵循MVC结构进行构建。小程序官方建议把所有小程序的页面都存放在pages目录中以单独的文件夹存在每个页面由4个基本文件组成分别是 页面组成 [page.name].js页面的脚本文件用于创建页面对象以及处理页面生命周期控制和数据处理 存放页面的数据、事件处理函数等[page.name].json当前页面的配置文件配置窗口的外观、表现等设置会覆盖app.json中的window设置。[page.name].wxmlWei Xin Markup Language,用于定义页面元素结构的语法遵循XML语法不是HTML语法类似HTML文件。[page.name].wxssWei Xin Style Sheet,用于定义页面样式的语法语法遵循Css语法扩展了css的基本用法和长度单位。 总结
总的来说UniApp 的安装和使用相对简单开发者只需要熟悉 Vue.js 和一些 UniApp 的相关概念就可以快速上手开发跨平台应用。利用 UniApp开发者可以高效地开发一套代码同时发布到多个平台节省开发成本提高开发效率。 欢迎大家提出问题
