[Wondgirl] 微信小程序(一)简介

什么是微信小程序:

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序官网(微信公众平台): https://mp.weixin.qq.com/
微信小程序开发文档
微信开发者工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122

微信开发者工具的使用

1.安装好微信开发者工具后,点击打开.

2.用手机的微信扫一扫扫码登陆.

3.选择本地项目:

4.添加项目

5.添写项目名称,选择存放目录

6.进到主届面,我们可以添加修改删除自己目录或文件.

每个文件更改后都要按command+s保存再进行编译.
调试—Console:打印log
调试—Sources:源码
调试—Network:网络
调试—Storage:缓存(本地数据库) 可以点击左边栏的缓存按钮清除缓存.
调试—AppData:程序的数据.
左边栏后台按钮,模拟小程序在后台运行.

导入已有项目

项目目录选择你要导入的项目即可.项目名称可以写成和要导入项目的名称一样.也可以不一样.

目录结构

编辑—app.json
pages数组里面是页面的路径,对应的是pages里面的文件夹,一个文件夹是一个页面.
每个页面必须包含一个 .js 文件 和一个 .wxml文件.
.js文件配制页面的入口.
.wxml文件配制布局与UI
.json是页面的配置文件
.wxss是页面的样式文件

{
  "pages":[//页面:是个数组(这里对应的两个页面.
    "pages/index/index",//index页面的路径
    "pages/logs/logs"//logs页面的路径
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

创建一个空的项目

不要勾选下方的复选框.

一.新建App.json文件

二.新建src源码目录.
1.在src目录下新建页面pages目录
2.在pages目录下新建index目录.
3.在index目录下新建页面index.js和index.wxml
三.新建app.js文件

四.我们在页面的布局.wxml文件中输入要显示的内容

五.在页面入口index.js中输入(页面的配制)

Page({
  data:{

  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数

  },
  onReady:function(){
    // 页面渲染完成

  },
  onShow:function(){
    // 页面显示

  },
  onHide:function(){
    // 页面隐藏

  },
  onUnload:function(){
    // 页面关闭

  }
})

在程序入口app.js中输入

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

在app.json中输入(程序的配制)

{
    "pages": [
      "src/pages/index/index"
    ]
}