微信小程序开发教程

来源：互联网发布：手机数据恢复软件免费版编辑：程序博客网时间：2024/05/16 14:08

1、介绍

微信小程序已经内测将近一个月了，网上对微信小程序的讨论也异常火爆，从发布到现在微信小程序一直占领着各种技术论坛的头条。

关于微信为什么要开发小程序，什么是小程序，这里就不做介绍了。因为这已经是昨日黄花，朋友圈以及各种论坛都已经讲过了，不清楚的可以搜索一下。

尝试各种看着API开发是一种自学习的过程、AndyCzy正在尝试第一个吃螃蟹的人（不可是第一个哈哈）。

2、官网资料

1：官方文档：
https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476197480996

2：开发工具：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476197490095

3：官方Demo
https://mp.weixin.qq.com/debug/wxadoc/dev/demo/quickstart.zip?t=1476197480996

3.0、先安装好开发工具

3.1、我用sublime编写（有部分提示）、官网工具运行。

4、案例介绍

这个案例特别简单、就是一个页面的跳转。目的就是为了熟悉小程序的目录结构和开发环境。

5、下图是目录结构。（官方教程）

4、修改过 app.json文件

{  "pages":[    "pages/index/index",    "pages/test/test",    "pages/logs/logs"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#000",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  },  "tabBar": {    "color": "green",    "backgroundColor": "#ffffff",    "selectedColor": "#ccc",    "list": [{      "pagePath": "pages/index/index",      "text": "首页",      "iconPath":"images/featured.png",      "selectedIconPath":"images/featured-actived.png"      },{        "pagePath":"pages/test/test",        "text": "测试页面",        "iconPath":"images/profile.png",        "selectedIconPath":"images/profile-actived.png"       },{        "pagePath":"pages/test/test",        "text": "访问博客",        "iconPath":"images/search.png",        "selectedIconPath":"images/search-actived.png"    }]      },  "debug":true}

5、修改过的index.json文件

{     "navigationBarTitleText": "微信小程序功能演示",    "navigationBarTextStyle": "while",    "navigationBarBackgroundColor": "#000"}

1 0