微信小程序安装与开发步骤
1.登陆 :微信专有开发工具安装地址
如图:我选择的是稳定版,64位
安装完成后 如图:
图 2 .
2.新建第一个小程序
2.1 申请 AppID
登陆https://mp.weixin.qq.com 点击"立即注册"
注册成功后,可以在开发–>开发管理–>开发设置中就可以显示小程序的AppID.
2…2新建小程序
安装完开发工具,AppID申请成功后,打开微信Web开发工具。注意:记得微信扫码登陆。
2.3点击+ 创建小程序
开发模式 选小程序,不适用云服务,语言javascript。
2.4 小程序的文件格式:
1.js 后缀的文件为页面脚本文件,用于实现页面的业务逻辑;
2.json 后缀的文件为配置文件,用于设置小程序的配置效 果,主要以json数据存放。
3.wxss后缀的文件为样式表文件,用于对小程序用户界面的美化设计。
4.wxml后缀的文件为页面结构文件,用于在页面上增加视图和组建等来构建页面。
下面先了解一下 文件目录:
page :目录主要用于存放小程序的页面文件,其中wxml文件和js文件是必须的。为了方便开发者减少配置项,文件名称必须与页面的文件夹名称相同。如图:index文件夹名下只能是index
util 目录
util 存放全局的js文件,目录名可由开发者根据需求自定义。如图创建小程序时自动生成的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
}
对于允许外部调用的方法,需要用module.exports声明后能在其他的js文件中通过以下代码引用:
var util=require('../../utils/util.js);//在需要使用的js文件中导入js
page({
data:{
time:util.formatTime(new Date()) //调入函数时,传入new Date() 参数
},
onLoad: function(){
var time=util.formatTime(new Date());
thid.setData(
time:time
);
}
})
下面介绍:小程序根目录下的文件
一个小程序的主体部分由3个文件组成,必须存放在项目的根目录下。每个文件的名称和功能都是特定的,具体如下:
(1) app.js : 该文件是小程序项目的启动入口文件,处理小程序生命周期中的一些方法,文件内容不能为空。
(2) app.json: 该文件是小程序的全局配置文件,用于设置导航条的颜色,字体大小,tabBar等。文件内容不能为空。
(3)app.wxss: 该文件是小程序的公共样式文件,用于全局美化设计界面。文件能容可以为空。
详解1. app.js 中的函数使用。
原始代码
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSyn