微信小程序 简单教程实例详解


Posted in Javascript onJanuary 13, 2017

刚接触到微信小程序开发,这里做一个简单的教程:

1. 获取微信小程序的 AppID

登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。

微信小程序 简单教程实例详解

注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。

2. 创建项目

我们需要通过开发者工具,来完成小程序创建和代码编辑。

开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

微信小程序 简单教程实例详解

  项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。

3. 编写代码创建

小程序实例

点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档

//app.js
App({
 onLaunch: function () {
  //调用API从本地缓存中获取数据
  var logs = wx.getStorageSync('logs') || []
  logs.unshift(Date.now())
  wx.setStorageSync('logs', logs)
 },
 getUserInfo:function(cb){
  var that = this;
  if(this.globalData.userInfo){
   typeof cb == "function" && cb(this.globalData.userInfo)
  }else{
   //调用登录接口
   wx.login({
    success: function () {
     wx.getUserInfo({
      success: function (res) {
       that.globalData.userInfo = res.userInfo;
       typeof cb == "function" && cb(that.globalData.userInfo)
      }
     })
    }
   });
  }
 },
 globalData:{
  userInfo:null
 }
})

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解

{
 "pages":[
  "pages/index/index",
  "pages/logs/logs"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle":"black"
 }
}

 app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
}

创建页面

在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

index.wxml 是页面的结构文件:

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="usermotto">
  <text class="user-motto">{{motto}}</text>
 </view>
</view>

本例中使用了<view/><image/><text/>来搭建页面结构,绑定数据和交互处理函数。

index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {}
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  })
 }
})

index.wxss 是页面的样式表:

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}
 
.userinfo-nickname {
 color: #aaa;
}
 
.usermotto {
 margin-top: 200px;
}

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

index.json 是页面的配置文件:

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

logs 的页面结构

<!--logs.wxml-->
<view class="container log-list">
 <block wx:for="{{logs}}" wx:for-item="log">
  <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>

logs 页面使用 <block/> 控制标签来组织代码,在 <block/> 上使用 wx:for 绑定 logs 数据,并将 logs 数据循环展开节点

//logs.js
var util = require('../../utils/util.js')
Page({
 data: {
  logs: []
 },
 onLoad: function () {
  this.setData({
   logs: (wx.getStorageSync('logs') || []).map(function (log) {
    return util.formatTime(new Date(log))
   })
  })
 }
})

4. 手机预览

开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。

微信小程序 简单教程实例详解

另外关于它的框架和组件大家可以看文档  https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=201715

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript String 对象
Apr 25 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
js字符串操作方法实例分析
May 06 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
javascript构造函数以及原型对象的理解
Jan 13 #Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 #Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 #Javascript
微信小程序(三):网络请求
Jan 13 #Javascript
Javascript自定义事件详解
Jan 13 #Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 #Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 #Javascript
You might like
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue.js路由跳转详解
2017/08/28 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python 如何设置守护进程
2020/10/29 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
难忘的一天教学反思
2014/04/30 职场文书
好听的队名和口号
2014/06/09 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
地道战观后感500字
2015/06/04 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript