正文

2017年度百度百科十大热词之一
微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小，下载速度很快，用户感觉不到下载的过程 )
限制：同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。
2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

1.2 小程序可以干什么？

同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用
通过扫一扫或者在微信搜索即可下载
用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
连接线上线下

2. 申请账号

开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。

跟随这个教程，开始你的小程序之旅吧！

2.1 申请帐号

点击此链接申请一个小程序账号

根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

完成注册后可登录微信小程序后台管理自己的账号啦点击进入微信小程序后台

登录成功进入首页后可点击开发管理查看账号设置

选择开发设置

2.2 测试号申请（我们小程序账号申请完成之后，建议务必要申请一个测试号用来开发）

点击我进行注册测试号

完成注册后可进行扫码选择测试号登录微信小程序后台管理自己的账号啦点击进入微信小程序后台

测试号和我们刚刚上面注册的正式号不一样测试号登录成功后只显示你的一些信息

3. 安装开发工具

点击此连接进入官网下载点击我下载微信小程序开发工具

3.1 选择稳定版

3.2 选择根据自己电脑配置进行下载

下载成功后的样子傻瓜式安装：点击后一直下一步下一步即可完成安装

4. 你的第一个小程序

4.1 创建小程序项目

1. 点击进入开发工具后进行微信扫码登录（第一次进入没有登录会让你扫码）

2. 完成扫码后并按照下列图中完成操作

3. 小程序项目结构

4.2 目录结构介绍

1. 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必须	作用
app.js	是	小程序逻辑
app.json	是	小程序公告配置
app.wxss	否	小程序公告样式表

2. 一个小程序页面由四个文件组成，分别是：

文件类型	必须	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

4.3 给小程序新增一个页面

1. 进入app.json 在第一个pages数组里面指定生成页面文件路径即可生动创建

注！想要哪一个页面先展示可按顺序排即可，第一个页面路径就是第一个显示的页面

4.4 给小程序当前页面设置局部配置（index.wxml为例：修改背景，字体颜色）

1. 选择pages下面的index目录里面的index.json文件里面修改配置

完整代码如下！可直接复制粘贴


  "usingComponents": ,
  "navigationBarBackgroundColor": "#000000",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "第一个小程序项目",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"

4.5 给小程序设置拖把栏（全局配置）

1. 选择app.json进入后在文件内第一个花括号里面添加代码进行编辑，多个节点进行逗号分开

完整代码如下！可直接复制粘贴


  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/logins/logins"
  ],
  "window":
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  ,
  "tabBar": 
    "list": [
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tabBar/coding.png",
      "selectedIconPath": "static/tabBar/coding-active.png"
    ,
    
      "pagePath": "pages/logins/logins",
      "text": "登录",
      "iconPath": "static/tabBar/component.png",
      "selectedIconPath": "static/tabBar/component-active.png"
    ,
    
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "static/tabBar/sdk.png",
      "selectedIconPath": "static/tabBar/sdk-active.png"
    
  ]
  ,
  "style": "v2",
  "sitemapLocation": "sitemap.json"

代码中的得到焦点和失去焦点后的图标可自行寻找并进行配置！或私信小编继续发送给你

4.6 给小程序设置按钮触摸事件（index.wxml为例）

1 先定义一个按钮并先绑定一个未定义的改变值函数

代码如下！

 <!-- 触摸事件 -->
<button bindtap="handleCm" type="primary">触摸事件</button>

2. 进入index.js 定义函数

代码如下！（可自行点击按钮实施效果！改变值没有）

  //自定义触摸事件
  handleCm()
    this.setData(
      motto: "您好! Jone"
    )

4.7 给小程序自定义公共函数并在index.js中引入后完成页面初始化赋值操作

1. 在index.js中添加一个属性：loginTime值为空

2. 在index.wxml中添加一条文本并双向绑定loginTime

代码如下

<text  class="user-motto">loginTime</text>

3. 在utils.js中自定义公共函数并导出

自定义函数如下！务必自行配置导出注！看图

//自定义方法
function toStr(e)
  return e="你好,"+e

4. 在index.js中引入公共文件util.js 并进行页面初始化赋值操作

在index.js中导入操作

import util from "../../utils/util"

在onLoad函数中进行操作

新增代码！

    //进行页面初始化时改变值
    this.setData(
        loginTime: util.formatTime(new Date()),
        motto: util.toStr('张三')
    )

10分钟入门微信小程序开发：从环境搭建到开发出第一个程序。(代码片段)

小程序简介小程序是一种不需要下载安装即可使用的快速应用，它实现了应用“触手可及”的操作；用户扫一扫或搜一下即可打开应用，完全不需要安装，因此小程序不仅可提高的用户的应用体验，也方便应用的传扩散。... 查看详情

微信小程序开发入门(代码片段)

目录1.简介微信小程序，英文名WechatMiniProgram是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。优点开发成本低、门槛低、开发周期短用完就关闭，不... 查看详情

微信小程序开发零基础入门——微信小程序入门(代码片段)

微信小程序入门一、小程序介绍1.1.什么是小程序？1.2.微信⼩程序历史1.3.小程序可以干什么？1.4.疯狂的微信⼩程序1.5.还有其他的⼩程序不容忽视1.6.官⽅微信⼩程序体验二、小程序开发资料三、第⼀个微信⼩程序四、开... 查看详情

如何入门微信小程序开发(代码片段)

最近微信开发小程序挺火的，自己选择了腾讯云官方推出的相册。先下载：破解版IDE下载地址，以及使用说明：http://download.csdn.net/detail/richard_jason/9660819http://download.csdn.net/detail/richard_jason/9660821这里由于csdn有上传... 查看详情

分享《微信小程序开发图解案例教程》pdf及代码+《微信小程序开发入门及案例详解》pdf及代码

...xQzq9I9g0g更多分享：https://pan.baidu.com/s/1g4hv05UZ_w92uh9NNNkCaA《微信小程序开发图解案例教程》PDF及代码+《微信小程序开发入门及案例详解》PDF及代码《微信小程序开发图解案例教程》PDF，356页，带书签目录；配套源代码。采用图、... 查看详情

微信小程序开发零基础入门(代码片段)

✍、目录微信小程序✍、目录1、微信小程序1.1、官方开发者工具1.2、小程序结构目录1.3、小程序配置1.3.1、全局配置app.json1.3.1.1、entryPagePath1.3.1.2、pages1.3.1.3、window1.3.1.4、tabBar1.3.1.5、debug1.3.2、页面配置：页面名称.json1.3.3、s... 查看详情

微信小程序开发入门介绍-布局组件(代码片段)

在小程序开发中比较重要的就是布局了。所谓的布局是依据美工提供的设计稿，按照工具提供的各类组件进行实现。小程序中我们常用的布局组件是view。通过布局组件就可以实现我们想要的效果。布局组件的添加我们还是使... 查看详情

微信公众号及小程序开发入门(代码片段)

开发过程中一些对微信公众号和小程序的认识。一、服务号在公众号开发入门一中提到，微信公众号分为订阅号和服务号，其中服务号功能最强，只准企业申请，并且要每年交300元认证费。如果企业想拥有自己的... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

17年小程序开始公测，经过5年的发展，无论从组件、开发工具、api、生态、社区，都已经发展的非常成熟了。如果17年年初你看小程序，觉得无需安装即用即走还是一个理念的话。站在今天看过去，往往是先提... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

微信小程序开发入门与实战（数据监听）(代码片段)

@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃 查看详情

微信小程序开发入门与实战（数据监听）(代码片段)

微信小程序开发技巧总结(持续更新...)(代码片段)

小程序开发技巧总结结合自己在平时的开发中遇到的各种问题，和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正。数据的生命周期1.短生命周期数据存储以小程序启动到彻底关闭为周... 查看详情

微信小程序开发常见问题总结(代码片段)

最近在做微信小程序开发，遇到了一些常见的问题，现总结一下。 1、text标签文字首行缩进。.testTexttext-indent:2em; 2、改变radio的默认大小。radiotransform:scale(0.6); 3、三目运算不起... 查看详情

微信小程序开发（笔记）(代码片段)

微信小程序开发笔记一、微信小程序的结构1、初识小程序2、快捷键二、常用组件1.input组件2.button组件三、小程序中的函数1.函数的两种定义方法1.函数在本页面的调用2.带参函数2.js中的默认函数四、点击事件五、获取用户输入六... 查看详情

微信小程序开发笔记进阶篇④——getphonenumber获取用户手机号码（小程序云）(代码片段)

...代码wxml三、前端代码js四、云函数五、程序流程一、前言微信小程序开发笔记——导读大部分微信小程序开发者都会有这样的需求：获取小程序用户的手机号码。但是，因为小程序用户的手机号码属于重要信息，为了... 查看详情

微信小程序开发(代码片段)

创建自己的微信小程序开发账号1.首先登录微信公众平台https://mp.weixin.qq.com/点击注册账号，按照提示完成需要填写的信息，并登录2.进入开发（1）在首页的左边的导航栏中，找到开发中的开发工具，进入微... 查看详情

可视化微信小程序开发小助手-troll(vscode插件）(代码片段)

....5Wxml文件读写4.后续5.结束语1.开场白今天向大家推荐一个微信小程序开发辅助工具TrollForWxml，这是一个VSCode插件。Troll工具的主要优点：能够查看详情