小程序开发文档_微信小程序开发文档-起步-小程序 - CSDN
  • 小程序开发文档

    千次阅读 多人点赞 2019-02-21 17:50:15
    小程序开发总结 用 Markdown编辑器 所展示的 最近领导交给一个任务,单独开发一个小程序项目,还要出一篇小程序课题文档。这也是我第一次接触小程序,遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结:...

    小程序开发总结

    最近领导交给一个任务,单独开发一个小程序项目,还要出一篇小程序课题文档。这也是我第一次接触小程序,遂把领导对课题的要求以及自己开发过程中遇到的问题做如下总结:

    1. 如何创建小程序项目

    这一步在官方文档中的描述已经很清楚了,主要分为几步:

    1. 申请账号,拥有小程序账号。
    2. 在小程序管理平台,可以看到小程序的 AppIDAppSecret

    绑定在一个微信开放平台账户下的订阅号、服务号、小程序、APP、PC网站都叫做”应用“,每个应用都有自己的AppID和AppSecret,AppID叫做应用唯一标识,AppSecret叫做应用密钥。

    AppID与AppSecret 的作用及使用方式:
    在开发过程中如果要使用微信相关功能,必须有官方认证的账号密码
    小程序项目中app.js的data需要添加appid和secret属性,二者配合使用,可调用公众号的接口能力

    1. 管理员需要将开发人员的微信号设置为开发者账号才可以进行小程序的开发
    2. 安装开发工具
    3. 简要介绍开发工具
      微信小程序和公众号开发有自己的微信开发工具,集成了公众号网页调试和小程序调试两种开发模式。
    • 使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK 详情
    • 使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
      在这里插入图片描述
    1. 增加了支持甘特图的mermaid语法1 功能;

    2. 如何获取微信账号信息及与第三方账号做绑定(小程序启动的过程都经历了哪些东西)

    功能性的小程序一般都需要获取用户的微信账号信息。最初小程序可以在首次进入时调用wx.getUserInfo(Object object) 弹窗微信授权,后来接口getUserInfo做了调整,在用户未授权过的情况下调用此接口,将不再出现授权弹窗,会直接进入 fail 回调。在用户已授权的情况下调用此接口,可成功获取用户信息。
    现在小程序获取授权需要通过button组件的bindgetuserinfo属性,配合open-type属性,实现点击按钮返回获取到的用户信息:

    <button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> 
    
    小程序的启动:

    . 微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。
    . 紧接着通过 app.json 的 pages 字段就可以知道当前小程序的所有页面路径,写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
    . 于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。
    . 小程序启动之后,在 app.js 定义的 App 实例的 onLaunch(小程序启动时触发) 回调会被执行

    我的小程序在app.js的onLaunch 方法中都执行了哪些操作:
    1.项目启动时执行 wx.getSetting() 获取用户的当前设置,判断用户是否已授权
    2. 如果用户已授权,调用wx.getUserInfo()获取用户信息,头像昵称等,然后进行自己小程序的内部操作
    3. 如果用户未授权,则跳转至登录页,用户通过点击按钮弹窗授权,获取用户信息
    未授权跳转登录页
    点击获取信息按钮弹窗授权

    // app.js 
    onShow: function () {
        var that = this
        // 展示本地存储能力
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  that.globalData.userInfo = res.userInfo
    
                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (that.userInfoReadyCallback) {
                    that.userInfoReadyCallback(res)
                  }
                  // 执行项目内部操作
                  that.onLogin()
                }
              })
            }else{
              // 没有授权,跳转授权登录页
              wx.redirectTo({
                url: '/pages/login/login',
              })
            }
          }
        })
      },
    
    <!--login.wxml -->
    <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" >允许获取公开信息</button>
    
    // login.js
    onGetUserInfo: function (e) {
       app.globalData.userInfo = e.detail.userInfo  // 返回的用户信息
    }
    

    如果需要将微信账号信息与自己的项目账号做绑定,那么可以将获取到的微信账号信息作为参数传送给后台,后台生成一个相对应的项目账号。

    3. 小程序配置 : 全局&页面

    全局配置

    app.json是小程序的全局配置,包括小程序的所有页面路径、界面表现、底部 tab 等,一般包含几个字段:pages、window、tabBar
    在这里插入图片描述
    pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
    window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
    tabBar字段 —— 定义小程序底部tab栏的表现,以及 tab 切换时显示的对应页面。

    {
      "pages": [
        "pages/index/index", 
        "pages/logs/index"
      ], // 所有页面路径
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      }, // 界面表现
      "tabBar": {
        "backgroundColor": "#F7F7FA",
        "color": "#757575",
        "selectedColor": "#6D8FE8",  // 底部栏配置
        "list": [  // tab列表
          {
            "pagePath": "pages/message/index/index",  // tab对应页面路径
            "text": "消息", // tab文字显示
            "iconPath": "images/icon_message.png",  // tab默认显示图标
            "selectedIconPath": "images/icon_message_blue.png" // tab选中后的图标
          },
          {
            "pagePath": "pages/zone/index/index",
            "text": "空间",
            "iconPath": "images/icon_friend.png",
            "selectedIconPath": "images/icon_friend_blue.png"
          }
      }
     }
    

    注: tab栏的图标icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片,同时tab列表配置最少2个,最多5个


    页面配置

    一个小程序页面由四个文件组成:

    1. .json 后缀的 JSON 配置文件
    2. .wxml 后缀的 WXML 模板文件
    3. .wxss 后缀的 WXSS 样式文件
    4. .js 后缀的 JS 脚本逻辑文件

    每个小程序页面可以使用自己的.json文件来对本页面的窗口表现进行配置。
    页面配置一般包括导航栏标题文字内容(navigationBarTitleText),是否开启下拉刷新(enablePullDownRefresh)等等。

    页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

    {
      "navigationBarTitleText": "个人中心",
      "enablePullDownRefresh": true,
      "backgroundTextStyle": "dark"
    }
    

    4. 小程序组件及页面介绍

    小程序为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
    组件是视图层的基本组成单元,一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内,例如:

    <view class="main_info">这是内容</view>
    

    注意:所有组件与属性都是小写,以连字符-连接

    小程序组件参考。

    页面的生命周期:

    onLoad

    1. 小程序注册完成后,加载页面,触发onLoad方法。

    2. 页面载入后触发onShow方法,显示页面。

    3. 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。

    4. 当小程序后台运行或跳转到其他页面时,触发onHide方法。

    5. 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。

    6. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload

    页面之间的通讯

    小程序页面之间有时需要进行数据的传递,个人使用的页面间数据通讯有两种方式:

    1. 页面A跳转到页面B时,在页面路由后携带参数,页面B在onLoad时获取options中的参数。
      页面A:
    	wx.navigateTo({
          url: '../unrelate/unrelate?cname='+cname+'&cid='+cid,
        })
    

    页面B:

    onLoad: function (options) {
        if(options.cname){
          this.setData({
            cname: options.cname,
            cid: options.cid
          })
        }
      }
    
    1. 如果页面之间需要传递的参数为对象或者数组,那么通过路由拼接参数的形式就不可取了,此时可以通过app.js中的globalData全局变量进行赋值。
      页面A:
      onJumpToNextLevelPoint: function(e){
        let child = e.currentTarget.dataset.child
        let name = e.currentTarget.dataset.name
        if(util.isValidArray(child)){
          app.globalData.pointChild = child // 全局变量进行赋值
          wx.navigateTo({
            url: '../knowledge/knowledge?name=' + name,
          })
        }
      }
    

    页面B:

      onLoad: function (options) {
        if (util.isValidArray(app.globalData.pointChild)) {
          this.setData({
            progressList: app.globalData.pointChild
          })
        }
      }
    

    5. 如何开发公共代码

    开发公共组件,个人使用的是component构造器定义公共组件。
    Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。
    具体开发方式是:

    1. 项目外层目录中创建components文件夹,创建组件文件夹然后新建Component,在这里写好公共组件的页面结构,样式,事件等。
      在这里插入图片描述
      组件的js文件中包含组件属性,组件数据,组件方法等,与vue组件有相似之处。
      properties是组件的对外属性,比如引用组件的页面传递给公共组件的值就通过properties来接收。
      在这里插入图片描述
    2. 在需要使用公共组件的页面JSON文件中,添加usingComponents配置,使用公共组件,key值是组件要在页面中使用时的标签名,val是公共组件的路径。在这里插入图片描述
      在页面的wxml文件中,使用json定义的公共组件标签,引用公共组件,并传递数据:
      在这里插入图片描述
    3. 公共组件中通过properties接收引用页面传递的值,然后使用{{}}在组件页面进行数据绑定即可。

    6. 如何使用微信提供的API

    为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。
    调用微信扫一扫功能:

    	wx.scanCode({        //扫描API
          success: function (res) {
            that.setData({
              IMECode: res.result
            });
            // 接下来执行自己的业务逻辑
            that.ChkWXZIme(res.result)
          }
        })
    

    调起本地相册选择图片或使用相机拍照功能(适用于更换头像):

    wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success(res) {
            // tempFilePath可以作为img标签的src属性显示图片
            let tempFilePaths = res.tempFilePaths
            that.setData({
              'userInfo.Avatar': tempFilePaths[0]
            })
          },
          fail() {
            that.setData({
              chooseImg: false
            })
          }
        })
    

    发起网络请求:

    	wx.request({
          url: ''
          method: 'POST',
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          data: {
            session: app.globalData.session
          },
          success: function(res){}
        })
    

    更多的 API 能力见 小程序的API。

    7. 代码的审核与发布

    提交审核

    为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。

    在开发者工具中上传了小程序代码之后,登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。

    在开发版本的列表中,点击 提交审核 按照页面提示,填写相关的信息,即可以将小程序提交审核。

    需要注意的是,请开发者严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。

    发布

    审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录 小程序管理后台 - 开发管理 - 审核版本中可以看到通过审核的版本。

    请点击发布,即可发布小程序。

    附:版本号书写规范

    major.minor.patch
    主版本号.次版本号.修补版本号

    patch: 修复bug,兼容老版本
    minor:新增功能,兼容老版本
    major:新的架构调整,不兼容老版本

    小程序开发过程中遇到的问题会重新出一篇文章。


    1. mermaid语法说明 ↩︎

    展开全文
  • 微信小程序开放接口: 收货地址 Card卡券 调起客户端小程序设置界面 获取用户过去三十天微信运动步数 打开小程序 获取发票抬头 微信小游戏开发能力: 用户授权开放能力 用户登录态签名 二维码开放能力 转发开放能力 ...
    展开全文
  • 微信小程序官方开发文档

    万次阅读 2017-11-07 11:52:35
    本文来至微信官网:https://mp.weixin.qq.com/debug/wxadoc/dev/

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

    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() {
        // 展示本地存储能力
        const logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
    
        // 登录
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
          }
        })
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
    
                }
              })
            }
          }
        })
      },
      globalData: {
        userInfo: null
      }
    })
    

    app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }
    

    app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

    /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    }
    

    创建页面

    在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

    每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

    index.wxml 是页面的结构文件:

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <block wx:if="{{hasUserInfo}}">
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
        <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    本例中使用了<view/><image/><text/>来搭建页面结构,绑定数据和交互处理函数。

    index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else {
          // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        }
      },
      getUserInfo: function(e) {
        this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
      }
    })
    

    index.wxss 是页面的样式表:

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    

    页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

    index.json 是页面的配置文件:

    页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

    logs 的页面结构

    <!--logs.wxml-->
    <view class="container log-list">
      <block wx:for="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>
    

    logs 页面使用 <block/> 控制标签来组织代码,在 <block/> 上使用 wx:for 绑定 logs 数据,并将 logs 数据循环展开节点

    //logs.js
    const util = require('../../utils/util.js')
    
    Page({
      data: {
        logs: []
      },
      onLoad: function () {
        this.setData({
          logs: (wx.getStorageSync('logs') || []).map(log => {
            return util.formatTime(new Date(log))
          })
        })
      }
    })
    

    运行结果如下:

    4. 手机预览

    开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。

    https://mp.weixin.qq.com/debug/wxadoc/dev/

    展开全文
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2019-07-16 13:27:41
    目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,...

    课程介绍

    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,共 9 篇文章。

    本课程共包含四个部分。

    第一部分(第1-3篇)带你初步了解小程序是什么,然后进行小程序开发的准备工作,从注册账号到安装开发工具一应俱全。工欲善其事,必先利其器。

    第二部分(第4-6篇)。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识,需要掌握的会进行说明,需要扩展的会提供信息的出处。千里之行始于足下。

    第三部分(第7-8篇)通过指南针的例子,介绍一个小程序的实现过程。通过这个实例,综合运用所学知识,使小程序开发能力进一步提高。麻雀虽小,五脏俱全。

    第四部分(第9篇)只包含一篇文章,具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓,全在收口。

    哪怕您事先没有任何微信小程序相关技术的经验,认真学完该达人课之后,您会掌握基本的小程序开发方法,并具备自主扩展知识面,以及进行更高层次开发的能力。

    点击查看课程全部内容

    作者介绍

    薛卫国,现就职于某外企担任架构小组责任人,CSDN 博客专家,长期从事 C++ 开发,精通 UML、设计模式,创办有公众号《面向对象思考》。毕业于东北大学,曾留校在国家重点实验室工作。

    课程内容

    第01课:初识微信小程序

    要火的节奏

    最近有一则来自北京商报的新闻引起了不少人的注意,我们这里选取一部分:

    争夺流量 手机厂商“抱团”对抗微信小程序

    3月20日,小米、中兴、华为等10家手机厂商联合对外宣布,推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下,本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为,对于整个市场来说,流量竞争有促进作用,但微信已经具有较强的用户黏性,十大手机厂商要想争夺用户流量并非易事。

    估计这些厂家的标准出台还需要一段时间,但是有一点可以确定的是:小程序类的开发要火。

    但如果你打开轻应用的文档可以发现两点:

    1.应用文档的信息量还很有限。2.轻应用的架构,采用的技术和微信小程序很相似。

    处于这个目的,作者赶在这个时机制作了本课程,希望可以为潮流加一份力;作为程序员,希望各位可以通过本课程的学习,在有限的时间内为自己添一份技能!

    参考资料:轻应用开发文档

    什么是小程序?

    最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

    当然了,关于玩法等等不是本文的内容,可以参照百度百科

    这就是微信小程序的成功案例了。

    微信小程序简介

    微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。关于小程序,张小龙在他的公开课中有过很详细的说明,大家尽可以到网上去搜,这里不再赘述,只说作者自己的理解。

    微信小程序这个词可以分解为“微信”和“小程序”两部分。

    其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。

    “小程序”是说它首先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。

    另外,微信不会提供类似于小程序商店的地方,需要小程序提供者自己通过二维码,群分享的手段来传播,这就是所谓去中心化的形态。

    微信朋友圈提供了好友之间沟通信息的手段,订阅号提供了面向粉丝推送信息的手段,而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

    小程序相关技术介绍

    本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员,因此在说明微信小程序的同时,对相关技术也将进行相应的介绍。通过这种方式,可使读者能够非常顺利地学习,而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

    微信小程序推出一年多一点的时间,算是一个新事物,但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现,不光是微信小程序,很多类似形态的应用都采用类似的架构:

    1. 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
    2. 使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
    3. 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
    4. 架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

    具体的语法,用途等将会在使用的时候详细介绍,这里只提一下相关技术的基本情况,了解即可。

    换一种说法就是:并不需要另外自己调查,跟着本课程走下去就好。

    JSON

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于 ECMAScript(W3C 制定的 JavaScript 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    XML

    XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。

    在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息,比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术,也是当今处理分布式结构信息的有效工具。早在1998年,W3C 就发布了 XML1.0 规范,使用它来简化 Internet 的文档信息传输。

    CSS

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    JavaScript

    JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    在1995年时,由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

    为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

    学习方法

    微信小程序虽然是新事物,但学习方法却不是新方法。

    我们的套路是:首先生产一个最简单的小程序实例,通过这个实例介绍微信小程序的构造和想法,这算是学习这个活动中“学”的部分。然后扩展这些知识点,通过开发一个简单的小程序的过程来运用这些知识点,这算是“习”的过程。

    这是作者这些年来屡试不爽的方法。

    参考资料

    在学习和开发的过程中,我们主要会参考微信的开发文档。其原因是小程序太新了,相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍,但是说实话,内容并不比微信本身的开发文档更详尽。

    第02课:开发环境的准备

    创建自己的小程序账号

    在开发自己的微信小程序之前,首先需要注册小程序账号,接下来我们一步一步做详细说明。

    打开浏览器,输入:mp.weixin.qq.com。

    因为是第一次使用,所以选择画面右上角的“立即注册”。

    选择左下角的“小程序”方框。

    输入邮箱、密码、确认密码、验证码,之后选择同意协议和条款。当然这里的密码不是邮箱的密码,而是正在申请的小程序账号的密码。

    最后按下“注册”按钮。

    点击“登录邮箱”按钮。打开相应的软件后,应该可以收到下面的邮件。如果没收到的话,建议看一下垃圾邮件,没准儿那里有。

    单击下半部一大片绿色的部分,就可以回到注册界面继续剩下的工作。

    选择主题类型为“个人”,然后输入管理员的姓名,身份证号码。

    输入手机号码并单击“获取验证码”,将手机接收到的验证码输入到短信验证码栏中。

    完成上述步骤,画面下部会出现一个二维码,需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

    如果认证成功,画面会变成下面这个样子。

    点击“继续”按钮。

    意思就是现在后悔还来得及,如果不后悔今后就没法后悔了。我们按下“确定”按钮。

    大功告成!

    小程序管理平台

    账号申请成功之后,就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

    首页

    内容比较简单,主要是表示小程序的实时访问次数和系统公告。

    开发管理

    用户在使用小程序的时候,需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

    过程也不复杂,一共分为三步:上传代码,提交审核和发布小程序。

    用户身份

    这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

    数据分析

    这个画面可以统计小程序的访问数量,对用户来源、性别、年龄分布等进行分析。

    模板消息

    这个画面可以定制微信小程序向客户发送的消息。

    客服消息

    通过这个画面可以指定小程序的客服人员,从而实现小程序的在线客服功能。

    附近的小程序

    当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时,小程序指定地点以后,用户可以通过微信的“附近的小程序”界面发现该小程序。

    运维中心

    一共有两个页面,分别用于查询小程序的错误日志和对客户端进行监控。

    推广

    用来自定义小程序推广关键字。

    设置

    设置分类中一共有五个页面,这里只介绍前两个。

    基本设置

    顾名思义,这里主要是用来设置小程序的基本信息。内容包括:

    1. 设定小程序名称,小程序头像;
    2. 取得小程序码;
    3. 取得认证;
    4. 设定主题信息;
    5. 其他省略。

    开发设置

    这个页面主要负责和小程序开发相关的设定信息,内容包括:

    1. 取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
    2. 生成小程序秘钥。
    3. 指定服务器域名。小程序可以访问外部网站,可以上传和下载文件。但是对象服务器不是任意的,需要在这里指定。
    4. 其他省略。

    其他

    在画面的右上角,有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

    安装开发工具

    小程序账号申请成功之后的工作就是准备开发环境。

    早期的版本在首页分类中有开发工具的下载链接,最近不知道为什么变成了访问次数统计画面。但是没有关系,可以直接点击这里,便可打开下面的下载地址页面。

    根据操作系统选择合适的下载链接。

    下载完成后打开安装程序,首先是开始画面。

    按下“下一步”按钮。

    按下“我接受”按钮。

    指定适当的安装目录后按下“安装”按钮。

    安装中……

    完成!

    接下来就可以开始微信小程序的开发之旅啦!

    第03课:微信开发者工具介绍

    第04课:小程序构成介绍——配置文件的形式和内容

    第05课:小程序构成介绍——WXML 和 WXSS

    第06课:小程序构成介绍——事件处理和数据绑定

    第07课:小程序开发实例——指南针(上)

    第08课:小程序开发实例——指南针(下)

    第09课:发布小程序

    点击查看课程全部内容

    展开全文
  • 微信小程序开发者文档教程,从入门到精通 多种实例源代码 超过100个完整项目源代码、文档
  • 微信小程序开发文档官方

    千次阅读 2019-01-09 09:15:59
    原文地址:https://developers.weixin.qq.com/miniprogram/dev/component/view.html
  • 微信小程序开发文档

    2019-04-12 19:58:35
    入门: https://developers.weixin.qq.com/miniprogram/dev/ 指南: https://developers.weixin.qq.com/miniprogram/dev/guide/ 框架: https://developers.weixin.qq.com/miniprogram/dev/reference/ ...
  • 今日头条&抖音小程序开发文档

    万次阅读 2020-08-27 19:00:26
    问题:百度上直接搜索“ 今日头条小程序开发文档 ” 或 “ 抖音小程序开发文档 ”,是搜不出来开发文档的,你可以搜索 “ 字节跳动小程序 ”。 点击这里可直接进入开发文档,或直接点击:...
  • 微信小程序开发文档及文档上传示例 一、什么是微信小程序 小程序是一种无需下载安装,即可使用的手机应用。只需要扫描二维码,或是搜一搜,就能立即使用。 与APP不同的是,小程序无需下载安装、无需卸载、用完即走,...
  • 微信小程序开发教程手册文档

    千次阅读 多人点赞 2018-06-28 18:34:41
    微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...
  • 百度智能小程序开发文档简介

    千次阅读 2018-07-06 14:39:20
    手百智能小程序介绍智能小程序是一种新的开放能力,开发者可以快速地开发一个智能小程序。通过搜索,用户可以在手百 App 内被便捷地获取和传播。目录结构工程的工作目录中包含以下文件:|____app.css|____app.json|_...
  • 微信小程序开发官方文档

    万次阅读 2016-10-09 20:42:21
     本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志。下载源码 ...
  • 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图: 这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一...
  • 微信小程序开发入门教程

    万次阅读 2017-04-28 20:38:31
    微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:     这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信...
  • 微信小程序(天气预报)开发文档

    千次阅读 2017-03-08 17:27:36
    小程序技术文档 一.小程序应用分析 1. 简单介绍 小程序是一种微信开发不需要下载安装即可使用的应用。 2. 实质 ...小程序开发框架的逻辑层是由JavaScript编写。 逻辑层将数据进行处理后发送给视图层
  • 微信公众号开发文档:...微信小程序API开发文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html 微信小程序支付接口文档:ht...
  • 微信小程序开发入门教程 含视频 有源码

    万次阅读 多人点赞 2017-07-03 10:31:18
    微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:     这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发...
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...
  • 支付宝iot小程序开发文档

    千次阅读 2019-10-17 10:34:33
    https://docs.alipay.com/mini/multi-platform/overview
1 2 3 4 5 ... 20
收藏数 495,474
精华内容 198,189
关键字:

小程序开发文档