设计、开发、运营……微信小程序基础知识全解(3)

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

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

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

{{userInfo.nickName}}

{{motto}}

本例中使用了、、来搭建页面结构，绑定数据和交互处理函数。

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 的页面结构：

{{index + 1}}. {{log}}

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

//logs.jsvar 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.手机预览

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

运营

具体运营规范：

使用微信小程序平台的服务，你必须阅读并遵守 《微信小程序平台服务条款》，以及腾讯为此制定的专项规则等。

能力

小程序七大能力解读：

线下扫码：用户可以在小程序中使用扫一扫。

对话分享：用户可以分享小程序或其中的任何一个页面给好友或群聊。

消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片。

小程序切换：用户可以在使用小程序的过程中快速返回聊天。

历史列表：用户使用过的小程序会被放入列表，方便下次使用。

公众号关联：微信小程序可与公众号进行关联。

搜索查找：用户可直接根据名称或品牌搜索小程序。

问答

1.小程序的入口在哪里？

小程序在微信里是没有入口的，微信更多的是希望小程序的启动来自于扫二维码。

2.有没有应用商店可以下载小程序？

小程序不存在下载过程，因此没有小程序应用商店。

3.小程序能不能推送消息？

小程序不能推送消息，但是会提供比较有限的服务触达能力。

4.小程序能不能分享到朋友圈？

小程序不能分享到朋友圈，但是可以分享到聊天里面，可以分享到群里面。

5.小程序和公众号之间是怎么样的一种关系？

你在公众号里面可以看到这个公众号同一个企业还做了哪些小程序，或者你在一个小程序里面你也可以看到，做这个小程序的企业还做了哪些公众号，他们是可以互相跳的。

作者：小明来源：人人都是产品经理

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：ASP站长网）