微信小程序开发文档官方版发布

简介:   微信公众平台团队喜欢在深夜给人惊喜,这不,微信小程序开发文档昨晚23点半发出了,很多开发者表示要兴奋得睡不着了。和ytkah一起看看小程序文档吧!小程序文档包含:小程序简易教程、小程序框架、小程序组件、小程序API、小程序工具、Q&A   您不会错过这些内容:微信小程序设计指南官方版放出 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。

  微信公众平台团队喜欢在深夜给人惊喜,这不,微信小程序开发文档昨晚23点半发出了,很多开发者表示要兴奋得睡不着了。和ytkah一起看看小程序文档吧!小程序文档包含:小程序简易教程、小程序框架、小程序组件、小程序API、小程序工具、Q&A

  您不会错过这些内容:微信小程序设计指南官方版放出

微信小程序开发文档

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志。下载源码
1. 获取微信小程序的 AppID

如果你是收邀请的开发者,我们会提供一个帐号,利用提供的帐号,登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。

如果是游客模式,可以跳过本步骤

微信小程序开发设置

注意:如果我们不是用注册时绑定的管理员微信号,在手机上体验该小程序。那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。


2. 创建项目

​ 我们需要通过开发者工具,来完成小程序创建和代码编辑。

​ 开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

​ 为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

 微信小程序添加项目

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。
3. 编写代码
创建小程序实例

​ 点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例

​ 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

​ app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

 app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口

目录
相关文章
|
3月前
|
小程序 定位技术 API
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
28 0
|
Web App开发 开发者
[爆]小程序内可直接打开网页了!附开发文档
昨天微信团队又深夜奉上大新闻:①小程序内可直接打开网页、②小程序可关联500个公众号。为便于开发者灵活配置小程序,小程序现开放内嵌网页能力。(网友评论称这个功能直接把小程序提高n个高度,秒掉手机浏览器。
1309 0
|
运维 小程序 前端开发
微信小程序从开发到发布流程
微信小程序从开发到发布流程
292 0
微信小程序从开发到发布流程
|
缓存 小程序 API
企业微信小程序从开发调试到发布的全流程
企业微信小程序从开发调试到发布的全流程
446 0
企业微信小程序从开发调试到发布的全流程
|
小程序 开发者
微信小程序发布新版本,如何提示强制更新!
微信小程序发布新版本,如何提示强制更新!
微信小程序发布新版本,如何提示强制更新!
|
小程序 开发者
微信小程序发布
微信小程序发布
8029 1
|
小程序 JavaScript 数据挖掘
【微信小程序】协同工作和发布 数据绑定
🍘协同工作和发布 - 小程序成员管理 1. 成员管理的两个方面 2. 不同项目成员对应的权限 3. 开发者的权限说明 4. 添加项目成员和体验成员 🍍协同工作和发布 - 小程序的版本 1. 软件开发过程中的不同版本 2. 小程序的版本 🍓协同工作和发布 - 发布上线 1. 小程序发布上线的整体步骤 2. 上传代码 3. 在后台查看上传之后的版本 4. 提交审核 5. 发布 6. 基于小程序码进行推广 🍇协同工作和发布 - 运营数据 1. 查看小程序运营数据的两种方式 🍒WXML 模板语法 - 数据绑定 1. 数据绑定的基本原则
【微信小程序】协同工作和发布 数据绑定
|
存储 小程序 前端开发
【微信小程序】image组件 API 协同工作和发布
🍒小程序的宿主环境 - 组件 🍈image 组件的基本使用 🥭image 组件的 mode 属性 🍓小程序的宿主环境 - API 🥦小程序 API 概述 🍅小程序 API 的 3 大分类 🍘协同工作和发布 - 协同工作 🍊了解权限管理需求 🥝了解项目成员的组织结构 🍉小程序的开发流程
【微信小程序】image组件 API 协同工作和发布
|
存储 运维 小程序
基于腾讯云开发微信小程序(新闻发布及共享平台)下
基于腾讯云开发微信小程序(新闻发布及共享平台)下
83 0
基于腾讯云开发微信小程序(新闻发布及共享平台)下
|
存储 JSON 小程序
基于腾讯云开发微信小程序(新闻发布及共享平台)上
基于腾讯云开发微信小程序(新闻发布及共享平台)上
237 0
基于腾讯云开发微信小程序(新闻发布及共享平台)上