一、注册小程序账号

1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可。

2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击“开发者设置”。

3.如下图,会获得一个AppID,记录AppID,后面创建项目时会用到。

二、下载微信web开发者工具

为了帮助开发者简单和高效地开发,微信小程序推出了全新的开发者工具 ,集成了开发调试、代码编辑及程序发布等功能。
1.下载页面:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
根据系统,选择对应的工具版本下载
2.工具包含编辑、调试和项目三个页卡:
(1)编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作
(2)程序调试主要有三大功能区:模拟器、调试工具和小程序操作区
(3)项目页卡主要有三大功能:显示当前项目细节、提交预览和提交上传和项目配置

三、编写小程序代码

1.目录结构

  test
    ├─ page
    │   └─ index
    │        ├─ index.js
    │        ├─ index.json
    │        ├─ index.wxml
    │        └─ index.wxss
    ├─ app.js
    ├─ app.json
    └─ app.wxss

2.文件说明
一个小程序包含一个app(主体部分)和多个page(页面)
(1)app是用来描述整体程序的,由三个文件组成,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,必须放在项目的根目录。
app.js是小程序的脚本代码(必须),可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API。

App({
    onLaunch: function () {
        console.log('App Launch')
    },
    onShow: function () {
        console.log('App Show')
    },
    onHide: function () {
        console.log('App Hide')
    },
    globalData: {
        hasLogin: false
    }
})

app.json是对整个小程序的全局配置(必须),用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。微信小程序中的每一个页面的【路径+页面名】都需要写在app.json的pages中,且pages中的第一个页面是小程序的首页。

{
    "pages":[
        "page/index/index"
    ],
    "window":{
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "欢迎页",
        "navigationBarBackgroundColor": "#fbf9fe",
        "backgroundColor": "#fbf9fe"
    },
    "debug": true
}

app.wxss是整个小程序的公共样式表(非必须)。

page {
    background-color: #fbf9fe;
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: space-between;
}

(2)page是用来描述页面,一个页面由四个文件组成,这里以首页index为例,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。
index.js 是页面的脚本文件(必须),在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

Page({
    data: {
        title:'小程序',
        desc:'Hello World!'
    }
})

index.wxml是页面结构文件(必须)。

<view class="container">
    <view class="header">
        <view class="title">标题:{{title}}</view>
        <view class="desc">描述:{{desc}}</view>
    </view>
</view>

index.wxss是页面样式表文件(非必须),当有页面样式表时,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

.header {
    padding: 80rpx;
    line-height:;
}
.title {
    font-size: 52rpx;
}
.desc {
    margin-top: 10rpx;
    color: #888888;
    font-size: 28rpx;
}

index.json是页面配置文件(非必须),当有页面的配置文件时,配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json中的默认配置。这里无需指定。

Tips:
a.为了方便开发者减少配置项,小程序规定描述页面的这四个文件必须具有相同的路径与文件名
b.小程序提供了丰富的API,可以根据自己需求选择(https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715

四、测试小程序项目

1.打开微信web开发者工具,选择“本地小程序项目”。

2.填写小程序的AppID,项目名称,选择上一步写好的小程序代码文件夹,点击“添加项目”。

3.如果出现如下效果,那么恭喜你,你的第一个小程序项目已经编写成功了!点击左侧边栏“编辑”,还可以在右侧编辑窗口直接对代码进行修改,保存(CTRL+S)后刷新(F5)即可生效。

4.如果想看小程序项目在手机上的效果,点击左侧边栏“项目”,点击“预览”生成二维码,打开微信扫描,就可以看到了。

5.手机端效果

开发一个微信小程序教程的更多相关文章

  1. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  2. 开发一个微信小程序项目教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  3. 开发一个微信小程序实例教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  4. 如何开发一个微信小程序

    一.概述     特点:对商家来说,小程序的开发成本低(有丰富的组件.api等).运营成本低(有数据日志等).稳定.互动流畅,便于分享.传播(基本微信平台的大量用户).对用户来说,扫码即可获取服务,随 ...

  5. 一个小时快速搭建微信小程序教程

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的 ...

  6. 微信小程序之微信登陆 —— 微信小程序教程系列(20)

    简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...

  7. 微信小程序 教程之引用

    系列文章: 微信小程序 教程之WXSS微信小程序 教程之引用微信小程序 教程之事件微信小程序 教程之模板微信小程序 教程之列表渲染微信小程序 教程之条件渲染微信小程序 教程之数据绑定微信小程序 教程之 ...

  8. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  9. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

随机推荐

  1. Linux开源模块迁移概述暨交叉编译跨平台移植总结--从《嵌入式Linux驱动模板简洁和工程实践》

    本文摘录<嵌入式Linux驱动模板简洁和工程实践>一本书"开发和调试技术". Linux强大的是,有那么多的开源项目可以使用.通常非常需要可以通过寻找相关的源模块被定义 ...

  2. JJG 623-2005 电阻应变仪计量检定规程

    JJG 623-2005 电阻应变仪计量检定规程 点击下载 JJG533-2007标准模拟应变量校准器检定规程 点击下载 JJG 533-1988标准(里面含有一些更具体的电路图供参考)

  3. ubuntu下的apache的虚拟主机的配置

    ubuntu下的虚拟主机的配置相对window下的虚拟主机配置有些许不同. 对于要新建的虚拟主机,我们可以有如下几个步骤: 1.在/etc/apache2/sites-available/目录下新建一 ...

  4. 【剑指offer】的功率值

    标题叙述性说明: 实现函数double Power(double base, int exponent),求base的exponent次方.不得使用库函数.同一时候不须要考虑大数问题. 分析描写叙述: ...

  5. MVC之Ajax

    MVC之Ajax如影随行 2014-07-04 10:34 by 书洞里的猫, 15 阅读, 0 评论, 收藏, 编辑 一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢? ...

  6. 使用vs2010复制粘贴代码时特别卡用一段时间就特别卡重启也没用

    vs2010编写代码一段时间后复制粘贴特别卡,下拉条也特别卡,这个状况困扰了我两个月,实在忍不住了,去网上搜了搜 有网友说是快捷键冲突,所以我就把其他程序结束了,结果莫名奇妙的瞬间就不卡了.最终弄明白 ...

  7. [转]SQL2005后的ROW_NUMBER()函数的应用

    SQL Server 2005后之后,引入了row_number()函数,row_number()函数的分组排序功能使这种操作变得非常简单 分组取TOP数据是T-SQL中的常用查询, 如学生信息管理系 ...

  8. Apple Swift中英文开发资源

    Apple Swift中英文开发资源集锦[apple swift resources] 找到的一些Apple Swift中英文资源原文链接,希望对大家有所帮助.欢迎大家补充,原始资源链接最好! The ...

  9. c#winform关闭窗口时触发的事件

    用户关闭软件时,软件一般会给“是否确认关闭”的提示. 通常,我们把它写在FormClosing 事件中,如果确定关闭,就关闭:否则把FormClosingEventArgs 的 Cancel 属性设置 ...

  10. .NET里的行为驱动开发

    BDD (Given - When - then) Ruby Cucumber, Java FitNesse , Python RoboFramework, C# specflow nspec .NE ...