微信小程序 开发指南详解


Posted in Javascript onSeptember 27, 2016

编写代码

创建小程序实例

点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 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-items="{{logs}}" wx:for-item="log">
 <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>

 logs 页面使用 <block/> 控制标签来组织代码,在 <block/> 上使用 wx:for-items 绑定 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. 手机预

微信小程序 开发指南详解

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

微信小程序 开发指南详解

以上就是对微信小程序开发指南的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 #Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 #Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 #Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 #Javascript
javascript动画之模拟拖拽效果篇
Sep 26 #Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 #Javascript
微信小程序 框架详解及实例应用
Sep 26 #Javascript
You might like
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 异常处理总结
2016/10/18 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python pandas常用函数详解
2018/02/07 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python用for循环求和的方法总结
2019/07/08 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
会计电算化专业求职信
2014/06/10 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
党员民主评议自我评价
2014/10/20 职场文书
地震慰问信
2015/02/14 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
python munch库的使用解析
2021/05/25 Python
讲解MySQL增删改操作
2022/05/06 MySQL
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang