微信小程序 开发指南详解


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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
vue vant Area组件使用详解
Dec 09 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
原生JS实现pc端轮播图效果
Dec 21 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处理excel cvs表格的方法实例介绍
2013/05/13 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
javascript每日必学之多态
2016/02/23 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python基于property实现类的特性操作示例
2018/06/15 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python爬虫 正则表达式解析
2019/09/28 Python
Django和Flask框架优缺点对比
2019/10/24 Python
python实现计算器功能
2019/10/31 Python
建龙钢铁面试总结
2014/04/15 面试题
专业销售业务员求职信
2013/11/18 职场文书
员工培训心得体会
2013/12/30 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
高中军训感言800字
2014/03/05 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
网站美工岗位职责
2014/04/02 职场文书
班级年度安全计划书
2014/05/01 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python