微信小程序 开发指南详解


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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
JS中的作用域链
Mar 01 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
纯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里面的抽象类
2010/01/28 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
对Angular中单向数据流的深入理解
2018/03/31 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
Python列表计数及插入实例
2014/12/17 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python实现像awk一样分割字符串
2020/09/15 Python
python 进程池pool使用详解
2020/10/15 Python
Python爬取梨视频的示例
2021/01/29 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
高考自主招生自荐信
2013/10/20 职场文书
优秀民警事迹材料
2014/01/29 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python