小程序

您当前的位置:首页 > 回声智库

如何入门微信小程序开发|上海回声网络

发布时间:2018-01-26 14:36:45      作者:回声网络
  如何入门微信小程序呢?自从微信小程序在2016年9月21日邀请内测以后,越来越火爆了,很多人只是知道有一个微信小程序,但是不知道到底有哪些作用。回声网络,上海网站建设、微信小程序开发公司,在这里给大家分享一些入门的知识,希望对大家有一定的帮助。
  1、当你准备开发一个微信小程序的时候,你首先需要一个小程序的 APPId ,在微信公众号官网可以获得。(暂时只有官方邀请的才可以获得)。
  你还需要准备微信开发者工具,官网同样有下载,下载安装即可,支持windows,linux,和MAC平台。
  2、微信小程序开发,小程序使用的微信自己开发 MINA 框架,提供了视图层描述语言,WXML 和 WXSS 以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者很方便的聚焦于数据与逻辑上。

  打开的时候会自动提示创建一个demo,demo结构文件树如下:


  3、其中app.js、app.json、app.wxss 是必不可少的,是小程序生成的依赖文件。

  app.js 监听并控制这整个程序的生命周期,也是全局变量声明的地方。如下是 app.js 中的一段代码:


  4、上述代码中的一些 API 介绍:
  App : 注册一个小程序
  onLunch :程序加载时执行的方法
  getStorageSync:以同步的方式获取本地缓存
  setStorageSync:设置缓存
  wx.getUserInfo: 获取用户信息
  5、app.json 是对整个小程序的全局配置。不可注释。
  pages为注册页面的列表,均为相对路径,省去了后缀名,程序默认显示列表第一个。
  6、app.wxss 是整个小程序的公共样式表。
  其中:
  apx 是尺寸单位,可根据屏幕宽度自适应大小。与之对应的有rem:规定屏幕宽度为20rem;1rem = (750/20)rpx 。
  7、全局文件就这些,然后我们看 index  文件中的内容
  有三部分内容,index.js ,index.wxml ,index.wxss,下面介绍它们的作用。
  8、index.wxml 文件
  这是一个展示页面,作用于html相同。可以看出,内容分块均采用 view 标签,这也很容易让人想到Android 中的布局,但其实只是更多的是 div 标签的另一个版本,在这里面有很多 MINA 自定义的属性,而且在我们在其中也看到了{{ }}样式的值操作,这也很容易让人联想到 angularJS 中的数据双向绑定,在 MINA 中也是支持的。
  同时,页面的展示,均需要在小程序全局的json配置文件中配置,前面已有说明。
  9、index.js 文件
  其中:
  getApp() 获取应用实例
  Page : 声明页面。
  data: 定义数据
  bindViewTap :为在view中绑定的是tap事件定义操作方法。
  wx.navigateTo :导航到响应页面。
  onLoad : 定义页面加载时的事件。在这里使用了在全局 app.js 中定义的回调函数,将data中的数据更新,由于双向的绑定,页面中的 userInfo 实例也会更新,显示出您的头像和昵称。
  10、index.wxss 中同样定义了一些样式,写法思路与css文件基本一致,只是不需要再去关心屏幕适配问题。
  微信小程序开发随着互联网的发展,在未来几年应该会越来越火爆,不久之后可能成为每个人都必须使用的一个程序。想了解更多关微信小程序开发的知识,欢迎来上海回声网络科技有限公司(http://www.huisheng.com/),电话:400-638-6378。
回声科技,网站建设 | 网络推广 多元化一站式服务!免费咨询热线:021-52835722 如需转载,请注明文章出处和来源
网址:http://www.huisheng.com 网站建设回声科技发布,转载还请注明出处。
关于我们

我们专注于为客户提供高端网站策划、网站建设、网站设计、品牌网络营销、小程序开发、电商平台策划开发、APP开发、软件开发、腾讯企业邮箱...

查看更多
最新案例
上海网站制作案例中盾安全-网站制作公司回声网络

中盾安全

中盾安全技术开发公司(以下简...

上海网站设计案例淳石资本-回声网络

淳石资本

淳石资产管理(宁波)有限公司...

联系我们

地 址:普陀区谈家渡路28号盛泉大厦7楼E座
邮 箱:info@huisheng.com

微信订阅号 个人微信号
沪公网安备 31010702001726号ICP备案12038328号-1   ©Copyright 上海回声网络科技有限公司 .All Rights Reserved. 网站地图