微信小程序开发流程以及注意事项

微信小程序官方文档

一、注册微信开发者平台账号

二、完善小程序信息:小程序管理后台

三、获取appid:“设置”-“开发设置” 

四、打开“微信开发者工具”,新建项目

五、进入到项目首页

六、代码构成

自动生成的目录结构如下:

├── pages
|   ├── index
|   |   ├── index.json  index 页面配置
|   |   ├── index.js    index 页面逻辑
|   |   ├── index.wxml  index 页面结构
|   |   └── index.wxss  index 页面样式表
|   └── log
|       ├── log.json    log 页面配置
|       ├── log.wxml    log 页面逻辑
|       ├── log.js      log 页面结构
|       └── log.wxss    log 页面样式表
├── app.js              小程序逻辑
├── app.json            小程序公共设置
└── app.wxss            小程序公共样式表
  • .json 后缀的 JSON 配置文件

app.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。属性文档

pages: 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)
window: 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

2>工具配置 project.config.json,可配置一个性化配置,例如界面颜色、编译配置等等。属性文档

{
	"description": "项目配置文件。",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
	},
	"compileType": "miniprogram",
	"libVersion": "2.2.1",
	"appid": "wxdda21eb8b323db99",
	"projectname": "GrapefruitRecord",
	"isGameTourist": false,
	"condition": {
	}
}

3>页面配置 page.json,可独立定义每个页面的一些属性,例如导航栏颜色、是否允许下拉刷新等等。属性文档

{
  "navigationBarTitleText": "查看启动日志"
}

 

  • .wxml 后缀的 WXML 模板文件

类似HTML,用来描述当前这个页面的结构,由标签、属性等等构成。也存在着不同点:

标签名不同,提供了包装好的组件标签

不同的属性和表达式 属性文档

 wx:if 实现控制语句比如:if/elsefor

{{ }} 实现数据绑定

 

  • .wxss 后缀的 WXSS 样式文件

类似CSS,用来描述页面的样子,具备CSS的大部分特性并进行了扩展 属性文档

新增了尺寸单位 rpx(手机设备的屏幕会有不同的宽度和设备像素比,免去像素换算的烦恼

提供了全局的样式和局部样式

仅支持部分 CSS 选择器

  • .js 后缀的 JS 脚本逻辑文件

用来处理这个页面和用户的交互事件说明文档

七、小程序的启动流程

整个小程序只有一个 App 实例,是全部页面共享的,注册程序APP

八、页面Page

Page 是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构,于是就得到了你看到的小程序的样子。

onLoad方法:页面渲染完成之后执行

Page({

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

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

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

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

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

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

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

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

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

九、组件

十、小程序API

可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等

需要注意的是:多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题

 

 

 

 

 

 

 

发布了15 篇原创文章 · 获赞 1 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览