精华内容
下载资源
问答
  • 小程序开发文档

    千次阅读 多人点赞 2019-02-21 17:48:24
    小程序开发总结 用 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语法说明 ↩︎

    展开全文
  • 微信小程序开发文档

    2018-08-03 09:16:40
    微信小程序开发文档,微信小程序开发文档,微信小程序开发文档,微信小程序开发文档,微信小程序开发文档,微信小程序开发文档,微信小程序开发文档
  • 今日头条&抖音小程序开发文档

    万次阅读 2019-02-13 12:52:35
    问题:百度上直接搜索“ 今日头条小程序开发文档 ” 或 “ 抖音小程序开发文档 ”,是搜不出来开发文档的,你可以搜索 “ 字节跳动小程序 ”。 点击这里可直接进入开发文档,或直接点击:...

    初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828

    在搜索引擎上直接搜索“ 今日头条小程序开发文档 ” 或 “ 抖音小程序开发文档 ”,是搜不出来开发文档的,你可以搜索 “ 字节跳动小程序 ”。

    点击这里可直接进入开发文档,或直接点击:https://developer.toutiao.com/docs/framework/

    新地址:
    https://microapp.bytedance.com/docs/zh-CN/mini-app/introduction/plug-in/privacy-policy-process-guidelines/

    在这里插入图片描述

    展开全文
  • 微信小程序开发文档及文档上传示例 一、什么是微信小程序 小程序是一种无需下载安装,即可使用的手机应用。只需要扫描二维码,或是搜一搜,就能立即使用。 与APP不同的是,小程序无需下载安装、无需卸载、用完即走,...

    微信小程序开发文档及文档上传示例

    一、什么是微信小程序

    小程序是一种无需下载安装,即可使用的手机应用。只需要扫描二维码,或是搜一搜,就能立即使用。
    与APP不同的是,小程序无需下载安装、无需卸载、用完即走,那么意味着也不占手机内存,此外,也不会主动推送信息骚扰你,只能用户触发
    

    二、如何开发小程序

    1.注册小程序

    1.1、注册方法
    在微信公众平台官网首页(http://mp.weixin.qq.com)点击右上角的“立即注册”按钮。
    每个邮箱只能申请一个小程序账号。邮箱作为登陆账号,需填写未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱
    1.2、选择注册的帐号类型
    选择“小程序”,点击“查看类型区别”可查看不同类型帐号的区别和优势。
    1.3、填写邮箱和密码
    请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。
    1.4、激活邮箱
    登录邮箱,查收激活邮件,点击激活链接。
    1.5、填写主体信息
    点击激活链接后,继续下一步的注册流程。请选择主体类型选择,完善主体信息和管理员信息。
    1.6、选择验证方式(每年300元费用)
    第一种.支付验证
    第二种.微信认证
    (如果只是为了自己开发不上线到的话,直接用下面开发者工具可以直接开发测试,不需要去注册,也不需要缴费,开发者工具支持本人微信连真机调试,也就是只有你能看到,别人搜不到,别人微信扫码也看不到)

    2.下载微信开发者工具

    2.1、在微信公众平台下载开发者工具[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html]
    在这里插入图片描述
    2.2、安装,点击下一步至安装完成

    2.3、运行微信开发者工具
    在这里插入图片描述
    需要扫码登录才能进行。

    2.4、新建项目
    在这里插入图片描述
    第三行appid在微信公众平台 开发设置中获取,可不获取
    在这里插入图片描述

    2.5、新建项目后进入开发页面,开发者工具主要分为五个部分,仿真器(仿真移动设备),编辑器(写代码)、调试器、目录树和工具栏
    在这里插入图片描述
    可以看到默认工程的目录树主要包含了三个部分,pages目录,utils目录和一些全局的文件。pages里存放的一般是每一个页面,默认工程里包含两个页面,首页index和一个日志页,每个页面由对应的布局样式文件组成。utils主要放一些工具型函数,比如网络请求,在util.js中实现,然后导出,最后再在需要的页面导入就可以使用其中的某些部件。

    单个页面结构组成:
    .js文件(小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求)
    .json文件( JavaScript Object Notation,是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色)
    .wxml文件(WeiXin Markup language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构)
    .wxss文件(WeiXin Style Sheet,是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改)组成

    三、浏览微信小程序开发官方文档开发接口

    当我们需要调用微信内置接口时,需要去查看官方api,了解是否有我们需要的接口,有的话需要提供哪些参数

    1、以文件上传接口为例子。

    首先分析需求,
    需求:微信好友通过微信把文档发给我,我需要把文档上传至小程序
    首先好友通过微信发给我,那么有两种可能,
    一是搜索打开本手机文件夹上传到小程序(会有权限安全问题)
    二是通过微信好友列表选定好友选定聊天记录进行上传

    然后考虑流程
    流程:上传文档。但是首先需选择文档,然后上传文档。所以需要至少一个选择文档的api接口,一个上传的api接口

    2、打开官方api

    有了思路之后,就可以去官方文档查询是否有文档上传接口了。
    打开官方api,如下图,搜索我们需要的文档上传接口
    在这里插入图片描述

    3、搜索结果及接口说明

    下图是选择文档接口(推荐把所有api从头到尾浏览一遍,这样以后需要接口的时候会有印象)
    在这里插入图片描述

    下图是上传文档接口代码示例(网络资源)

    在这里插入图片描述

    代码中的url为后台对应接口的链接,success为上传成功后回调的方法。Name及formData为业务逻辑用到的业务属性参数,上传者,文档名等参数。
    开发者工具测试中需要勾选不校验域名业务域名选项。
    在这里插入图片描述
    注意:项目实际发布到服务器时,需要在微信公众平台 开发者设置 中进行域名等属性的配置,小程序才能正常运行。

    在这里插入图片描述

    4、java接口
    接下来就是写后端对上传的文件进行处理,也就是上面上传调用的url。
    接口逻辑为:本地自定义新建文件夹,然后判断接收到的文件是否为空,不为空则存到该文件夹下,然后把路径保存到数据库的表里。若为空则返回错误提示
    在这里插入图片描述
    至此,例子结束。

    四、上传发布审核上线

    编码完之后,可以在开发工具右上角点击上传按钮将代码至微信后台。如下:

    在这里插入图片描述

    输入相关版本号确定之后可以在微信小程序后台管理处看到提交的版本。
    在这里插入图片描述
    提交完之后进入审核中,一般一两天就能查看审核结果,通过审核之后,就可以搜到小程序了。

    展开全文
  • 《微信小程序开发文档》使用指南

    热门讨论 2016-11-30 18:56:36
    这份微信小程序开发者文档是微信公众平台官方团队发布,由W3Cschool编辑整理完成,方便开发者查阅学习,并添加拓展了《微信小程序设计规范》等相关知识,使该文档内容更加丰富。
  • 百度智能小程序开发文档简介

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

    手百智能小程序介绍

    智能小程序是一种新的开放能力,开发者可以快速地开发一个智能小程序。通过搜索,用户可以在手百 App 内被便捷地获取和传播。

    目录结构

    工程的工作目录中包含以下文件:


    |____app.css

    |____app.json

    |____project.swan.json

    |____pages

    |       |____detail

    |       |        |____detail.css

    |       |        |____detail.swan

    |       |        |____detail.js

    |       |____index

    |       |        |____index.js

    |       |        |____index.swan

    |       |        |____index.css

    |____app.js

    我们看到以下几类的文件:

    1、 .json 为后缀的 JSON 配置文件,这个文件配置了 SWAN 智能小程序所有页面的路径和界面展现样式等;

    2、 .swan 结尾的 SWAN 模板文件,这个文件是用来描述当前这个页面的文件结构,类似于网页网页中的 HTML 文件;

    3、 .css 结尾的 CSS 样式文件,描述页面样式;

    4、 .js 结尾的 JS 文件,处理这个页面和用户的交互。


    框架概述

    SWAN App 为开发者提供了 MVVM 的开发方式。JS 状态的变更引起视图的变化,视图的变更也可以回馈到逻辑层的状态中,开发者开发更加方便。

    SWAN App 基本开发思路类似于前端开发,并增强调用大量端能力,性能体验优于普通 Web 。上层架构基于 JS 开发,可以辅助开发者进行良好得开发。


    相关资讯:  微信小程序    微信小程序开发教程

    展开全文
  • 支付宝iot小程序开发文档

    千次阅读 2019-10-17 10:34:33
    https://docs.alipay.com/mini/multi-platform/overview
  • 微信公众号开发文档:...微信小程序API开发文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html 微信小程序支付接口文档:ht...
  • 微信小程序开发文档官方

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

    万次阅读 多人点赞 2018-05-21 15:32:24
    本篇将帮助读者实现基于 微信开发者工具 &amp; C#环境 下的用户在小程序上的授权登陆。 准备: 微信开发者工具下载地址:...微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/d...
  • 微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文: 微信官方于 2017 - 12 - 28 日 开发微信小程序 开发小游戏 , 微信小程序小游戏开发官方文档的地址 ...h...
  • 微信小程序开发教程手册文档

    万次阅读 多人点赞 2018-06-28 14:25:48
    微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,...
  • 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图: 这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一...
  • 微信小程序开发官方文档

    千次阅读 2017-05-30 02:26:59
    官方文档教程1:http://bcoder.cn/wxopen/官方文档教程2:http://bing.aliaii.com/wxopen/本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 580,011
精华内容 232,004
关键字:

小程序开发文档