微信开发文档view_微信开发文档 微信开发文档 - CSDN
  • view(访问网页): 用户点击view类型按钮后,会直接跳转到开发者指定的url中。 于是我在第一时间更新了小q机器人(微信号:xiaoqrobot)的菜单,在一级菜单“更多”下增加了二级菜单“使用帮助”,点击该菜单...

    引言及内容概要

    view(访问网页):

     用户点击view类型按钮后,会直接跳转到开发者指定的url中。

    于是我在第一时间更新了小q机器人(微信号:xiaoqrobot)的菜单,在一级菜单“更多”下增加了二级菜单“使用帮助”,点击该菜单项会直接跳转到网页,如下图所示。


    最近也有不少网友问起这种类型的菜单是如何创建的,本篇文章就为大家介绍下view类型的自定义菜单该如何创建。


    自定义菜单的两种类型(click和view)

    公众平台API文档中给出了自定义菜单的json结构示例,我从中截取两个菜单项的json代码,一个是click类型,另一个是view类型,如下所示。

    [html] view plain copy
    1. {     
    2.     "type":"click",  
    3.     "name":"今日歌曲",  
    4.     "key":"V1001_TODAY_MUSIC"  
    5. },  
    6. {  
    7.     "type":"view",  
    8.     "name":"歌手简介",  
    9.     "url":"http://www.qq.com/"  
    10. }  
    从上面可以看出,两种类型的菜单除了type值不同之外,属性也有差别。click类型的菜单有key属性,而view类型的菜单没有key属性,与之对应的是url属性。通过上一篇的学习我们知道,key值是用于判断用户点击了哪个click类型的菜单项。而view类型的菜单没有key属性,目前无法在公众账号后台判断是否有用户点击了view类型的菜单项,也就没办法知道哪个用户点击了view类型的菜单项。


    建立view类型的菜单对象

    View类型的菜单有3个属性:type、name和url。在上一篇文章中,我们创建了菜单项的基类Button,Button类只有一个属性name。View类型的菜单对象也需要继承Button类,代码如下:

    [java] view plain copy
    1. package org.liufeng.weixin.pojo;  
    2.   
    3. /** 
    4.  * view类型的菜单 
    5.  *  
    6.  * @author liuyq 
    7.  * @date 2013-04-10 
    8.  */  
    9. public class ViewButton extends Button {  
    10.     private String type;  
    11.     private String url;  
    12.   
    13.     public String getType() {  
    14.         return type;  
    15.     }  
    16.   
    17.     public void setType(String type) {  
    18.         this.type = type;  
    19.     }  
    20.   
    21.     public String getUrl() {  
    22.         return url;  
    23.     }  
    24.   
    25.     public void setUrl(String url) {  
    26.         this.url = url;  
    27.     }  
    28. }  


    创建带view类型的菜单示例

    我们对前一篇文章中给出的菜单创建代码进行调整,增加view类型的菜单项,完整的菜单创建代码如下:

    [java] view plain copy
    1. package org.liufeng.weixin.main;  
    2.   
    3. import org.liufeng.weixin.pojo.AccessToken;  
    4. import org.liufeng.weixin.pojo.Button;  
    5. import org.liufeng.weixin.pojo.CommonButton;  
    6. import org.liufeng.weixin.pojo.ComplexButton;  
    7. import org.liufeng.weixin.pojo.Menu;  
    8. import org.liufeng.weixin.pojo.ViewButton;  
    9. import org.liufeng.weixin.util.WeixinUtil;  
    10. import org.slf4j.Logger;  
    11. import org.slf4j.LoggerFactory;  
    12.   
    13. /** 
    14.  * 菜单管理器类 
    15.  *  
    16.  * @author liufeng 
    17.  * @date 2013-08-08 
    18.  */  
    19. public class MenuManager {  
    20.     private static Logger log = LoggerFactory.getLogger(MenuManager.class);  
    21.   
    22.     public static void main(String[] args) {  
    23.         // 第三方用户唯一凭证  
    24.         String appId = "000000000000000000";  
    25.         // 第三方用户唯一凭证密钥  
    26.         String appSecret = "00000000000000000000000000000000";  
    27.   
    28.         // 调用接口获取access_token  
    29.         AccessToken at = WeixinUtil.getAccessToken(appId, appSecret);  
    30.   
    31.         if (null != at) {  
    32.             // 调用接口创建菜单  
    33.             int result = WeixinUtil.createMenu(getMenu(), at.getToken());  
    34.   
    35.             // 判断菜单创建结果  
    36.             if (0 == result)  
    37.                 log.info("菜单创建成功!");  
    38.             else  
    39.                 log.info("菜单创建失败,错误码:" + result);  
    40.         }  
    41.     }  
    42.   
    43.     /** 
    44.      * 组装菜单数据 
    45.      *  
    46.      * @return 
    47.      */  
    48.     private static Menu getMenu() {  
    49.         CommonButton btn11 = new CommonButton();  
    50.         btn11.setName("天气预报");  
    51.         btn11.setType("click");  
    52.         btn11.setKey("11");  
    53.   
    54.         CommonButton btn12 = new CommonButton();  
    55.         btn12.setName("公交查询");  
    56.         btn12.setType("click");  
    57.         btn12.setKey("12");  
    58.   
    59.         CommonButton btn13 = new CommonButton();  
    60.         btn13.setName("周边搜索");  
    61.         btn13.setType("click");  
    62.         btn13.setKey("13");  
    63.   
    64.         CommonButton btn14 = new CommonButton();  
    65.         btn14.setName("历史上的今天");  
    66.         btn14.setType("click");  
    67.         btn14.setKey("14");  
    68.           
    69.         CommonButton btn15 = new CommonButton();  
    70.         btn15.setName("电影排行榜");  
    71.         btn15.setType("click");  
    72.         btn15.setKey("32");  
    73.   
    74.         CommonButton btn21 = new CommonButton();  
    75.         btn21.setName("歌曲点播");  
    76.         btn21.setType("click");  
    77.         btn21.setKey("21");  
    78.   
    79.         CommonButton btn22 = new CommonButton();  
    80.         btn22.setName("经典游戏");  
    81.         btn22.setType("click");  
    82.         btn22.setKey("22");  
    83.   
    84.         CommonButton btn23 = new CommonButton();  
    85.         btn23.setName("美女电台");  
    86.         btn23.setType("click");  
    87.         btn23.setKey("23");  
    88.   
    89.         CommonButton btn24 = new CommonButton();  
    90.         btn24.setName("人脸识别");  
    91.         btn24.setType("click");  
    92.         btn24.setKey("24");  
    93.   
    94.         CommonButton btn25 = new CommonButton();  
    95.         btn25.setName("聊天唠嗑");  
    96.         btn25.setType("click");  
    97.         btn25.setKey("25");  
    98.   
    99.         CommonButton btn31 = new CommonButton();  
    100.         btn31.setName("Q友圈");  
    101.         btn31.setType("click");  
    102.         btn31.setKey("31");  
    103.   
    104.         CommonButton btn33 = new CommonButton();  
    105.         btn33.setName("幽默笑话");  
    106.         btn33.setType("click");  
    107.         btn33.setKey("33");  
    108.           
    109.         CommonButton btn34 = new CommonButton();  
    110.         btn34.setName("用户反馈");  
    111.         btn34.setType("click");  
    112.         btn34.setKey("34");  
    113.           
    114.         CommonButton btn35 = new CommonButton();  
    115.         btn35.setName("关于我们");  
    116.         btn35.setType("click");  
    117.         btn35.setKey("35");  
    118.           
    119.         ViewButton btn32 = new ViewButton();  
    120.         btn32.setName("使用帮助");  
    121.         btn32.setType("view");  
    122.         btn32.setUrl("http://liufeng.gotoip2.com/xiaoqrobot/help.jsp");  
    123.   
    124.         ComplexButton mainBtn1 = new ComplexButton();  
    125.         mainBtn1.setName("生活助手");  
    126.         mainBtn1.setSub_button(new Button[] { btn11, btn12, btn13, btn14, btn15 });  
    127.   
    128.         ComplexButton mainBtn2 = new ComplexButton();  
    129.         mainBtn2.setName("休闲驿站");  
    130.         mainBtn2.setSub_button(new Button[] { btn21, btn22, btn23, btn24, btn25 });  
    131.   
    132.         ComplexButton mainBtn3 = new ComplexButton();  
    133.         mainBtn3.setName("更多");  
    134.         mainBtn3.setSub_button(new Button[] { btn31, btn33, btn34, btn35, btn32 });  
    135.   
    136.         /** 
    137.          * 这是公众号xiaoqrobot目前的菜单结构,每个一级菜单都有二级菜单项<br> 
    138.          *  
    139.          * 在某个一级菜单下没有二级菜单的情况,menu该如何定义呢?<br> 
    140.          * 比如,第三个一级菜单项不是“更多体验”,而直接是“幽默笑话”,那么menu应该这样定义:<br> 
    141.          * menu.setButton(new Button[] { mainBtn1, mainBtn2, btn33 }); 
    142.          */  
    143.         Menu menu = new Menu();  
    144.         menu.setButton(new Button[] { mainBtn1, mainBtn2, mainBtn3 });  
    145.   
    146.         return menu;  
    147.     }  
    148. }  

    119~122行代码就是用于创建view类型菜单项的。上面的菜单结构也是小q机器人(微信号:xiaoqrobot)目前在使用的,读者可以对照着理解。

    补充:居然还有些网友问我上面的自定义菜单创建代码在哪里调用,问我为什么不把调用的代码也公开?搞的我都有点不好意思了。上面的菜单创建代码是写在main方法中,直接在开发工具中运行一下就可以了,这应该是最最基础的Java知识了。另外,菜单只要创建一次,会一直存在的,不需要每次启动应用程序都去创建菜单。当然,你也可以把菜单的创建代码集成到项目中,并非一定要放在main方法中。程序是死的,人是活的,解决方法往往有很多种,怎么方便实用就怎么来!


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

    官方文档教程1:http://bcoder.cn/wxopen/

    官方文档教程2:http://bing.aliaii.com/wxopen/

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

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

    {
      "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  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>

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

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

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {}
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
      }
    })

    ​ 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-items="{{logs}}" wx:for-item="log">
        <text class="log-item">{{index + 1}}. {{log}}</text>
      </block>
    </view>

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

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

    运行结果如下:

    4. 手机预览

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

    展开全文
  • * 在开发过程中,可以使用接口调试工具来在线调试某些接口。 * 公众号主要通过公众号消息会话和公众号内网页来为用户提供服务的,下面分别介绍这两种情况: 1、公众号消息会话 * 公众号是以微信用户的一个联系人...

    /**
    * 在开发过程中,可以使用接口调试工具来在线调试某些接口。
    * 公众号主要通过公众号消息会话和公众号内网页来为用户提供服务的,下面分别介绍这两种情况:

     1、公众号消息会话
     * 公众号是以微信用户的一个联系人形式存在的,消息会话是公众号与用户交互的基础。
     * 目前公众号内主要有这样几类消息服务的类型,分别用于不同的场景
     1)群发消息:公众号可以以一定频次(订阅号为每天1次,服务号为每月4次),
     向用户群发消息,包括文字消息、图文消息、图片、视频、语音等。
     2)被动回复消息:在用户给公众号发消息后, 微信服务器  会将消息发
     到开发者预先在开发者中心设置的服务器地址(开发者需要进行消息真实性验证),
     公众号可以在5秒内做出回复,可以回复一个消息,也可以回复命令告诉  微信服务器  这条消息暂不回复。
     被动回复消息可以设置加密(在公众平台官网的开发者中心处设置,设置后,按照消息加解密文档来进行处理。
     其他3种消息的调用因为是API调用而不是对请求的返回,所以不需要加解密)。
     3)客服消息:在用户给公众号发消息后的48小时内,公众号可以给用户发送不限数量的消息
     ,主要用于客服场景。用户的行为会触发事件推送,某些事件推送是支持公众号据此发送客服消息的,详见微信推送消息与事件说明文档。
     4)模板消息:在需要对用户发送服务通知(如刷卡提醒、服务预约成功通知等)时,
     公众号可以用特定内容模板,主动向用户发送消息。
     *
     *
     2、公众号内网页
     许多复杂的业务场景,需要通过网页形式来提供服务,这时需要用到:
     1)网页授权获取用户基本信息:通过该接口,可以获取用户的基本信息
     (获取用户的OpenID是无需用户同意的,获取用户的基本信息则需用户同意)
    
     2)微信JS-SDK:是开发者在网页上通过JavaScript代码使用微信原生功能的工具包,
     开发者可以使用它在网页上录制和播放微信语音、监听微信分享、上传手机本地图片、拍照等许多能力。
    
     第一步:填写服务器配置
     登录微信公众平台官网后,在公众平台后台管理页面 - 开发者中心页,点击“修改配置”按钮,
     填写服务器地址(URL)、Token和EncodingAESKey,
     其中URL是开发者用来接收微信消息和事件的接口URL。
     Token可由开发者可以任意填写,用作生成签名(该Token会和接口URL中包含的Token进行比对,从而验证安全性)。
     EncodingAESKey由开发者手动填写或随机生成,将用作消息体加解密密钥。
    
     第二步:验证服务器地址的有效性
     开发者通过检验signature对请求进行校验(下面有校验方式)。若确认此次GET请求来自微信服务器,
     请原样返回echostr参数内容,则接入生效,成为开发者成功,否则接入失败。
    
     第三步:依据接口文档实现业务逻辑
     验证URL有效性成功后即接入生效,成为开发者。如果公众号类型为服务号(订阅号只能使用普通消息接口),
     可以在公众平台网站中申请认证,认证成功的服务号将获得众多接口权限,以满足开发者需求
    
     此后用户每次向公众号发送消息、或者产生自定义菜单点击事件时,开发者填写的服务器配置URL
     将得到微信服务器推送过来的消息和事件,然后开发者可以依据自身业务逻辑进行响应,例如回复消息等。
    
     用户向公众号发送消息时,公众号方收到的消息发送者是一个OpenID,是使用用户微信号加密后的结果,
     每个用户对每个公众号有一个唯一的OpenID。
    
    
     1、自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单。
     2、一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以“...”代替。
     3、创建自定义菜单后,菜单的刷新策略是,在用户进入公众号会话页或公众号profile页时,如果发现上一次拉取菜单的请求在5分钟以前,就会拉取一下菜单,
     如果菜单有更新,就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注,则可以看到创建后的效果。
    
    
     自定义菜单接口可实现多种类型按钮,如下:
     1、click:点击推事件
     用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event    的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互;
     2、view:跳转URL
     用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息。
     3、scancode_push:扫码推事件
     用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是URL,将进入URL),且会将扫码的结果传给开发者,开发者可以下发消息。
     4、scancode_waitmsg:扫码推事件且弹出“消息接收中”提示框
     用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后,将扫码的结果传给开发者,同时收起扫一扫工具,然后弹出“消息接收中”提示框,随后可能会收到开发者下发的消息。
     5、pic_sysphoto:弹出系统拍照发图
     用户点击按钮后,微信客户端将调起系统相机,完成拍照操作后,会将拍摄的相片发送给开发者,并推送事件给开发者,同时收起系统相机,随后可能会收到开发者下发的消息。
     6、pic_photo_or_album:弹出拍照或者相册发图
     用户点击按钮后,微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。
     7、pic_weixin:弹出微信相册发图器
     用户点击按钮后,微信客户端将调起微信相册,完成选择操作后,将选择的相片发送给开发者的服务器,并推送事件给开发者,同时收起相册,随后可能会收到开发者下发的消息。
     8、location_select:弹出地理位置选择器
     用户点击按钮后,微信客户端将调起地理位置选择工具,完成选择操作后,将选择的地理位置发送给开发者的服务器,同时收起位置选择工具,随后可能会收到开发者下发的消息。
     9、media_id:下发消息(除文本消息)
     用户点击media_id类型按钮后,微信服务器会将开发者填写的永久素材id对应的素材下发给用户,永久素材类型可以是图片、音频、视频、图文消息。请注意:永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。
     10、view_limited:跳转图文消息URL
     用户点击view_limited类型按钮后,微信客户端将打开开发者在按钮中填写的永久素材id对应的图文消息URL,永久素材类型只支持图文消息。请注意:永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。
    
    
     * */
    
    
    /***
     *
     * 接口调用请求说明
     * http请求方式:POST(请使用https协议) https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
     *
     * 开发者ID
     AppID(应用ID)wxrtvgcrdkiih
     */
    
    展开全文
  • 本文来至微信官网: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/

    展开全文
  • 查看微信号开发文档
  • 微信小程序开发教程文档微信小程序是什么?微信小程序如何开发微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...
  • 文档基于腾讯公司微信二次开发的相关规范,对微信二次开发的流程、步骤做了相关的说明,方便程序设计和开发人员快速掌握微信公众平台开发技术,便于提高代码的编写效率以及减少出现错误概率。 使用范围 本...
  • 最近项目中的网页通过微信分享朋友或朋友圈等功能出现了无法显示分享图片等信息,后经过排查发现是微信版本升级导致,采用js-sdk完成分享接口,为了快速实现该功能效果,于是我打算通过前台js进行实现来看看分享效果...
  • 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:     这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信...
  • 原文地址:https://developers.weixin.qq.com/miniprogram/dev/component/view.html
  • 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图: 这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一...
  • WXSS--微信开发文档

    2020-05-27 23:08:31
    同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比,WXSS 扩展的特性有: 尺寸单位 样式导入 尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。...
  • 小程序碰到了个问题,view并不能让文本自动换行。 官方定义的view组件,display为block。 scroll-view中定义display:flex是无效的。 view中要让中文片段自动换行,需要采用white-space
  • 微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取。
  • 微信小程序的开发文档我们可以知道,微信应用开放的服务和组件包含如下: 视图容器:视图(View)、滚动视图、Swiper 基础内容:图标、文本、进度条 表单组件:按钮、表单等等 操作反馈 导航 媒体组建:音频、...
  • 看下微信开发文档上怎么说就明白了: 当用户主动发消息给公众号的时候(包括发送信息、点击自定义菜单、订阅事件、扫描二维码事件、支付成功事件、用户维权),微信将会把消息数据推送给开发者,开发者在一段时间内...
  • 因为工作的需要,这一两年对微信公众号和小程序,项目制作的比较多。...对于微信开发,其实最主要的就是阅读微信开发者文档,并细心的书写和替换变量,还有就是会细致的去调试错误,慢慢达到自己的要...
  • 文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志  1. 获取...
1 2 3 4 5 ... 20
收藏数 19,250
精华内容 7,700
关键字:

微信开发文档view