小程序开发二:上手第一个小程序

一、创建项目

1)打开开发者工具

小程序开发二:上手第一个小程序

 2)填入对应的项目信息

小程序开发二:上手第一个小程序

3)创建完成

小程序开发二:上手第一个小程序

二、目录讲解

2.1、app.js

注册微信小程序的应用

通过调用App方法传入一个Object类型的参数(主要是一些事件处理 生命周期的钩子函数)

2.2、app.json

注册小程序的页面

2.3、project.config.json

开发者工具的配置文件

2.4、页面目录

2.4.1、.js

通过调用App方法传入一个Object类型的参数(主要是一些事件处理 生命周期的钩子函数)

2.4.2、.json

页面的配置

2.4.1、.wxml

页面的元素

2.4.1、.wxss

页面的样式

三、第一个小程序

3.1、注册页面

在app.json中注册一个HelloWorld的页面

app.json:

{"pages": [
  "pages/HelloWorld/HelloWorld"
]
}

 

3.2、创建页面

每个页面都会有四个文件 分别是 .js、.json、 .wxml、 .wxss

1)HelloWorld.js

// HelloWorld.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

2)HelloWorld.json

{}

 

3)HelloWorld.wxml

<view>HelloWorld</view>

 

4)HelloWorld.wxss

view{
  margin-top: 100px;
  text-align: center;
}

 

 3.3、运行

小程序开发二:上手第一个小程序

 

小程序开发二:上手第一个小程序

上一篇:群发技术-使用python3给微信好友群发消息


下一篇:ASP.NET MVC5微信公众平台整合开发实战视频教程