微信小程序开发之入门实例教程篇


Posted in Javascript onMarch 07, 2017

前言

近日,在工作闲暇之余,阅读了一些关于微信小程序的文章,忍不住,想动手试他一试。本文就以“我的第一个微信小程序”为例,简单的介绍下,微信小程序的入门级用法。

一、注册小程序账号

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: 1;
}
.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、如果想看小程序项目在手机上的效果,点击左侧边栏“项目”,点击“预览”生成二维码,打开微信扫描,就可以看到了。

微信小程序开发之入门实例教程篇

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
js实现select下拉框菜单
Dec 08 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 #Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 #Javascript
详解JS异步加载的三种方式
Mar 07 #Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 #Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 #Javascript
JQuery中Ajax的操作完整例子
Mar 07 #Javascript
You might like
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python实现网页链接提取的方法分享
2014/02/25 Python
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
基层党建工作宣传标语
2014/06/24 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
催款函怎么写
2015/06/24 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
python实现局部图像放大
2021/11/17 Python