微信小程序开发-第一个小程序（一）

1、啥是小程序？
小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验
微信小程序是一种不需要下载也不需要安装就可以使用的应用程序

它需要所有的开发者都能做到：

• 快速的加载
• 更强大的能力
• 原生的体验
• 易用且安全的微信数据开放
• 高效和简单的开发

​2、开发环境
小程序的主要开发语言是 JavaScrip
开发网页时，只需要使用到浏览器，搭配编译器或一些辅助工具即可。
小程序开发，需要申请小程序帐号、登陆微信公众平台、安装小程序开发者工具、配置项目等过程才能完成。

3、新建小程序
3-1 扫码进入开发者工具
已注册登陆开发者账号，安装开发者工具（官网可自行下载）后，
每次打开微信开发者工具时，都需要先扫码进入

3-2 新建/选择小程序
扫码后，出现如下窗口：
如果之前已建有小程序项目，这里会有记录，如果需要修改或继续开发，选择相应的小程序进入即可；

如果第一次打开，或者需要新建小程序项目时，点击窗口内的 “+” 加号，会出现一个新建小程序项目的窗口，如下：

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID ，
如果没有AppID,而你的小程序作为测试使用，可以直接使用推荐的测试号即可
如果你要上线发布小程序，就需要购买自己的域名

3-3 小程序中的尺寸单位
微信小程序中css的尺寸单位是rpx，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx
官方建议以iPhone6 为标准，屏幕宽度为375px，共有750个物理像素，即750rpx = 375px = 750物理像素，

微信小程序也支持尺寸单位rem，
rem和rpx的换算关系：
rem: 规定屏幕宽度为20rem；
1rem = (750/20)rpx
1rpx = 0.5px = 1物理像素

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

4、第一个小程序
先来看看第一个简单的小程序，就是下面这个熊样子：

4-1先来看看小程序的结构
小程序无论大小，文件如何变来变去，无非就是下面四种文件，先看看它们分别有啥作用

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件, 项目入口文件app.js

4-2 json配置文件
在小程序中，json配置文件存放的静态配置的信息。
大眼一扫，不难发现项目的根目录下有一个 app.json 和 project.config.json文件，
在 pages目录的子目录下都有一个.json文件，存放对应页面的配置信息。

app.json 是当前小程序的全局配置，包括小程序的所有页面路径、界面显示、网络超时时间、底部 tab 等等。
app.json文件中配置信息
pages —— 用于描述当前小程序所有页面路径（必填项），这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

"pages": ["pages/index/index",//首页"pages/user/user",//用户页"pages/logs/logs"//日志页]

window —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等等。
想看其他配置，请移步官方大厅 小程序配置app.json

"window": {"backgroundTextStyle": "light",//下拉背景样式，loading图的样式，dark或light"navigationBarBackgroundColor": "#ABE7F4",//导航栏背景颜色"navigationBarTitleText": "测试小程序",//导航栏标题名字"navigationBarTextStyle": "black" //导航栏标题颜色，black或white}

tabBar——小程序底部导航栏及tab切换时对应的页面

"tabBar": {//tab列表，最少两个，最多五个，里面存放对象，每个对象接收四个参数，如下"list": [{"pagePath": "pages/index/index",//跳转页面"text": "首页",//标题名字"iconPath":"/ico/home.png",//图片路径"selectedIconPath":"/ico/home-active.png"//选中点击后的图片路径},{"pagePath": "pages/user/user","text": "用户","iconPath":"/ico/user.png","selectedIconPath":"/ico/user-active.png"},{"pagePath": "pages/logs/logs","text": "日志","iconPath":"/ico/log.png","selectedIconPath":"/ico/log-active.png"}],"backgroundColor": "#C8F7D3" //底部导航栏背景色}

sitemapLocation 来指明 sitemap.json 的位置

"sitemapLocation": "sitemap.json"

sitemap.json
小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。
默认情况下，所有页面都会被索引。

{"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{"action": "allow","page": "*"}]
}

配置 path/to/page 页面不被索引，其余页面允许被索引

{"rules":[{"action": "disallow","page": "path/to/page"}]
}

project.config.json
小程序开发者工具在每个项目的根目录都会生成一个 project.config.json文件，
在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

{"description": "项目配置文件","packOptions": {"ignore": []},"setting": {"urlCheck": true,"es6": true,"enhance": false,"postcss": true,"minified": true,"newFeature": true,"coverView": true,"nodeModules": false,"autoAudits": false,"showShadowRootInWxmlPanel": true,"scopeDataCheck": false,"checkInvalidKey": true,"checkSiteMap": true,"uploadWithSourceMap": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""}},"compileType": "miniprogram","libVersion": "2.0.4","appid": "wx933fdd3711986c86","projectname": "ExeciseNotebook","debugOptions": {"hidedInDevtools": []},"isGameTourist": false,"simulatorType": "wechat","simulatorPluginLibVersion": {},"condition": {"search": {"current": -1,"list": []},"conversation": {"current": -1,"list": []},"game": {"currentL": -1,"list": []},"miniprogram": {"current": -1,"list": []}}
}

5-1 框架
整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。
小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，
并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

5-2 数据绑定
框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。
当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

在一个组件的属性上添加bindtap属性并赋予一个值(一个函数名)
当点击该组件时, 会触发相应的函数执行（通过bindtap绑定点击事件）

pages/index/index.wxml

<view class="container"><view class="userinfo"><!--wx:if  wx:else 条件渲染--><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><!-- 头像 --><!--绑定点击事件--><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><!-- 昵称 --><text class="userinfo-nickname"><!--数据绑定-->{{userInfo.nickName}}</text></block></view><view class="userexplain"><text class="user-motto">{{explain}}</text></view>
</view>

pages/index/index.js

//获取应用实例
const app = getApp();Page({data: {explain:'hello，this is my first file',userInfo: {},hasUserInfo: false,//判断小程序的API，回调，参数，组件等是否在当前版本可用。canIUse: wx.canIUse('button.open-type.getUserInfo')},//点击事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
})

pages/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>

pages/logs/logs.js

const util = require('../../utils/util.js');Page({/*页面的初始数据*/data: {logs:[]},/*生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({logs: (wx.getStorageSync('logs') || []).map(log => {return util.formatTime(new Date(log))})})},/*生命周期函数--监听页面初次渲染完成*/onReady: function () {},/**生命周期函数--监听页面显示*/onShow: function () {},/**生命周期函数--监听页面隐藏*/onHide: function () {},/*生命周期函数--监听页面卸载*/onUnload: function () {},/*页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*页面上拉触底事件的处理函数*/onReachBottom: function () {},/*用户点击右上角分享*/onShareAppMessage: function () {}
})

utils/util.js

const formatTime = date => {const year = date.getFullYear(); // 年const month = date.getMonth() + 1; // 月const day = date.getDate(); // 日const hour = date.getHours(); // 时const minute = date.getMinutes(); // 分const second = date.getSeconds(); // 秒return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}const formatNumber = n => {n = n.toString();return n[1] ? n : '0' + n;
}module.exports = {formatTime: formatTime
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！