入坑微信小程序

作者: kangyiii | 来源:发表于2017-01-19 15:26 被阅读0次

自从去年张小龙提出小程序的概念以来,小程序这个词在这一年间就一直萦绕在大家的耳边,而小程序也不负众望,经过一年的准备终于在今年1月8日正式与大家见面。它依托微信平台,采用hybird技术,既能有接近native应用的交互体验,又具有H5应用随用随取免安装的方便快捷,一时间受到了相当程度的热捧。那么今天,就向大家介绍一下如何利用微信提供的开发工具来开发微信小程序。

开发工具下载链接

小程序开发工具下载地址:小程序开发工具

开始正式旅程

  • 安装过后进入的第一个页面,微信扫码下一步,按照截图一步一步来


    首次进入开发工具
    选择第一个
设置项目目录和文件名

开发界面

开发界面

从这里正式进入到开发页面,左侧三个主选项卡,分别为编辑,调试,项目。

  • 编辑:点击编辑,右侧会出现项目目录,选中文件后就可以进行代码编写了。


    编辑界面
  • 调试:点击界面我们会看到如图内容,主要作用是查看查看报错信息,网络请求状态,页面层次结构,动态调试JS等
调试界面
  • 项目:主要显示项目配置信息,在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者代码 ES6 语法转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。


    项目界面

项目文件结构

代码文件主要有.json(全局配置文件),.js(JavaScript),.wxml(布局文件),wxss(样式文件)这4种格式的文件。

.wxml类似于web开发中的.html文件,而.wxss类似于.css文件。

文件结构

小程序的入口

小程序在启动时会创建App instance,也就是我们当前小程序的实例,其中会利用这三个文件app.json、app.js、app.wxss,对小程序进行全局配置。

app.json

该文件用于对小程序进行全局配置。其实每个页面也都可以有一个这样的配置文件,不过与app.json不同的是,页面json文件只能设置window下的样式。

配置包括:
pages:页面文件路径
window:窗口表现
networkTimeout:设置各种网络请求的超时时间
tabBar:设置多 tab
debug:是否开启 debug 模式

app.json内容说明
app.js

小程序逻辑层代码在这里实现,通过js编写,小程序的生命周期就在这里实现,同iOS appdelegate里面的生命周期类似。

App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
}, globalData: 'I am global data'})

app.js初始代码解析
app.wxss

这个不多说,类似于web开发中css的一个外联文件,设置整个应用程序的样式。

相关文章

  • CoreText入坑二

    微信应用号(实际叫微信小程序)今天内测了, 好像也不关我啥事。继续入坑, CoreText入坑一实现了CoreTe...

  • 微信小程序入坑

    1.navigator带参跳转可分为两种(open-type): 一种是跳转到新页面url后面的路径(open-t...

  • 入坑微信小程序

    自从去年张小龙提出小程序的概念以来,小程序这个词在这一年间就一直萦绕在大家的耳边,而小程序也不负众望,经过一年的准...

  • 小程序相关实用文章

    1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...

  • 【教程】微信小程序入门

    微信小程序入门基础知识 Moustache:我的微信小程序入门踩坑之旅 github精选:微信小程序入门简要教程 ...

  • 微信小程序入坑体验

    1、分享页面 2、按钮悬浮底部:关键代码position: fixed;bottom: 0;按钮的布局设置成如下:...

  • 微信小程序入坑集锦

    前言:前端小白的个人日记整理,记录小程序项目中遇到的坑,整理出来与大家分享,希望对大家有帮助,如有错误的地方,请指...

  • 微信小程序入坑指南

    在微信小程序正式发布之前,江湖上就早已充斥着它的传说,有说颠覆生态啦,有说开发者的春天来啦,有说还待观望啦。先不管...

  • 零碎总结-不定时更新

    后面更新的写在前面。。。。。。微信小程序常见问题 第六,关于textarea 这个坑啊坑!,微信小程序中设置了悬浮...

  • 开发微信小程序分页功能的坑

    微信小程序开发分页的坑 微信小程序开发中list列表经常要进行分页处理,踩坑在所难免。 app.json wxml...

网友评论

    本文标题:入坑微信小程序

    本文链接:https://www.haomeiwen.com/subject/cgkjbttx.html