微信小程序安装与开发步骤

微信小程序安装与开发步骤

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