正文是以二个简单的小例子,来简要上课微信小程序开发步骤,希望推进学习分享。

概念

微信小程序,简称小程序,缩写xcx,英文mini
program。是一种不要求下载安装即可使用的应用,它达成了使用“触手可及”的企盼,用户扫一扫也许搜一下即可打开应用。也体现了“用完即走”的观点,用户毫非亲非故怀是或不是安装太多应用的标题。将“小程序”定义为“一种新的采用形态”,应用将无处不在,随时可用,但又无需安装卸载。

开发工具

小程序有专用的开发工具,集开发,编写翻译,测试,预览,提交于一体,方便使用,且具有语法提示效果,下载地址链接

事关知识点

html,javascript,css等前端开发语言,并且小程序也提供了团结尤其的框架,组件,API接口。

小程序代码构成

json,(一共有四中后缀的公文组成)如下图所示

json 1

  • .json 后缀的 JSON
    配置文件【app.json是对脚下小程序的全局配置,蕴涵了小程序的富有页面路径、界面表现、网络超时时间、底部tab 等;page.json 其实用来代表和小程序页面相关的计划】
  • .wxml 后缀的 WXML 模板文件【 WXML 充当的正是相近 HTML
    的剧中人物,是页面包车型地铁文书档案结构】
  • .wxss 后缀的 WXSS 样式文件【WXSS 具有 CSS 超过四分之二的性状,小程序在
    WXSS 也做了有个别扩张和改动】
  • .js 后缀的 JS
    脚本逻辑文件【JS就是处理和用户展开互动的地点,首要有事件处理等】

框架

  小程序支付框架的指标是通过尽大概简单、高效的法子让开发者可以在微信中付出具有原生
APP 体验的劳动。如下图所示

  • pages:接受3个数组,每一项都是字符串,来钦命小程序由哪些页面组成。每一项代表对应页面包车型客车【路径+文件名】新闻,数组的第③项代表小程序的发端页面。小程序中新增/减少页面,都亟需对
    pages 数组进行修改。
  • window:用于安装小程序的状态栏、导航条、标题、窗口背景观。
  • tabBar:若是小程序是3个多 tab 应用(客户端窗口的底层或顶部有 tab
    栏能够切换页面),能够透过 tabBar 配置项钦点 tab 栏的表现,以及 tab
    切换时显示的照应页面。

json 2

组件

框架为开发者提供了一名目繁多基础零部件,开发者能够经过整合这么些基础零部件实行飞速支付。本例中用到的组件首要有以下二种:

  • view 视图容器,类似html中的div标签。
  • swiper 滑块视图容器,在那之中只可停放<swiper-item/>组件,否则会造成未定义的一坐一起。能够设置是还是不是出示面板提醒点及其颜色,是还是不是自动切换和切换时间等属性。

json 3

  • icon
    图标,微信自定义控件能够定义图标的颜料,大小,形状等。【icon的门类,有效值:success,
    success_no_circle, info, warn, waiting, cancel, download, search,
    clear】

json 4

  • image
    图片【注:image组件私下认可宽度300px、高度225px】【mode表示图片裁剪、缩放的格局,共13种,其中4 种是缩放方式,9 种是裁剪形式】
  • map 地图,【markers
    标记点用于在地形图上出示标记的职位,polyline钦命一文山会海坐标点,从数组第1项连线至最后一项,circles在地形图上海展览中心示圆】

 json 5

  Tips:map 组件使用的中纬度是计都星坐标系,调用 wx.getLocation
接口须要钦命 type 为
gcj02。即从百度地图上获取的坐标是不能够用的,会有误差,须求更换才行。

 

关于微信小程序,最好的就学手册,便是官方的读书文书档案,本文意在引玉之砖,共同学习提升。

相关文章

网站地图xml地图