小程序

微信应用号（小程序，「应用号」的新称呼）终于来了！ 目前还处于内测阶段，微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子？怎样将一个「服务号」改造成为「小程序」？ 我们暂时以一款简单的第三方工具的实例，来演示一下开发过程吧。（公司的项目保密还不能分享代码和截图。博卡君是边加班边偷偷给大家写教程。感谢「名片盒」团队提供他们的服务号来动这个手术，所以博卡君的教程就用「名片盒」的公众号滚动更新发布吧?） OK，为了让大家尽快看到这份教程，博卡君注定要熬夜了！今晚开始更新，希望明天一早就能发布第一篇教程！记录开始！看看几天能完成变身吧！ 序言 开始开发应用号之前，先看看官方公布的「小程序」教程吧！（以下内容来自微信官方公布的「小程序」开发指南） 本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。 1. 获取微信小程序的 AppID 首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号，登录 mp.weixin.qq.com，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。 注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份 – 开发者」模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。 2. 创建项目 我们需要通过开发者工具，来完成小程序创建和代码编辑。 开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。 为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的…

微信官方jsapi提供了界面操作接口，用来控制微信网页右上角的菜单，下面看看微信官方文档关于界面操作接口的说明。 隐藏右上角菜单接口 wx.hideOptionMenu(); 登录后复制 显示右上角菜单接口 wx.showOptionMenu(); 登录后复制 关闭当前网页窗口接口 wx.closeWindow(); 登录后复制 批量隐藏功能按钮接口 wx.hideMenuItems({     menuList: [] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3 }); 登录后复制 批量显示功能按钮接口 wx.showMenuItems({     menuList: [] // 要显示的菜单项，所有menu项见附录3 }); 登录后复制 隐藏所有非基础按钮接口 wx.hideAllNonBaseMenuItem(); // “基本类”按钮详见附录3 登录后复制 显示所有功能按钮接口 wx.showAllNonBaseMenuItem(); 登录后复制 实现代码步骤…

本篇文章给大家带来了关于的相关问题，其中主要介绍了关于基础架构原理的相关内容，其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容，下面一起来看一下，希望对大家有帮助。 【相关学习推荐：】 下图为微信小程序的整体架构图： 发展由来 我们先来简单讲讲微信小程序的发展历，知己知彼方能百战不殆。微信小程序简称小程序。张小龙于2017年01月09日在微信公开课上宣布其正式上线。小程序英文名为 Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 小程序上线以来，一直被称为便携版的 APP，关于两者之间的区别，无外乎是小程序相对轻便、开发成本低、开发周期短、收效快。 小程序并非凭空冒出来的一个概念，当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。 WebView 是移动端（手机、IPad）提供的运行 JavaScript 的环境，是系统渲染 Web 网页的一个控件，可与页面 JavaScript 交互，实现 APP 与 Web…

最近，“微信小程序”这个词占据了朋友圈，大有一番风起云涌之势，当然，还不可能夸张到使原生App开发人员失业这种程度。当然，作为一名技术人员，时刻保持对新技术的好奇心是必须的，所以在网上找大神的教程，搭建了一下开发环境，来学习一下这个新的开发框架。 一 项目文件结构 当打开微信小程序的Demo的时候，我个人习惯是先看整个项目的文件结构，先大致弄清这部分是干什么的，那部分又是干什么的，微信小程序基本的文件结构如下图： 图1-微信小程序基本文件结构 首先我们一眼就可以看到，在项目根目录有三个文件，app.js，app.json，以及app.wxss，下面来谈谈我对这三个文件的理解。 1 . app.js app.js中包含一个App()函数，我把它理解为微信小程序真正意义上的入口，也就是说当启动一个小程序的时候，首先会执行到这里。App()函数用来注册一个小程序，参数为Object类型，可以在其中指定小程序的生命周期函数（理解还不是很透彻）, 当然，也可以定义一个全局的数据和函数， 我们可以在页面中调用全局的getApp()方法，获得小程序实例，从而来调用我们定义的全局数据和函数。 2 . app.json app.json可以对小程序进行全局的配置，比如我们可以配置小程序有哪些页面、窗口表现形式、设置网络超时时间、设置多tab等。下面就是一个简单的配置： {  "pages": [  "page/index/index",  "page/logs/index"  ],  "window": {  "navigationBarTitleText": "Demo"  },  "tabBar": {  "list": [{  "pagePath": "page/index/index",  "text": "首页" …

    最近一个礼拜搞了一个微信自定义菜单的开发，总的来说蛮郁闷的。     先给几个接口做下分析：     1：查询接口；查询接口分为两个，一个是开发模式下的普通查询接口，他只会查询出你通过添加接口创建出来的菜单和个性化的菜单（让公众号的不同用户群体看到不一样的自定义菜单），而不能获取到你通过微信管理平台添加的菜单。还有一个是可以查询全部菜单的接口，这个接口有点蛋疼，如果你先在平台上添加一个菜单，然后后台调用这个接口就可以获取到这个菜单，但调用这个接口的返回的json跟添加时的格式是不一样的（就是说你把它发回给你的json原模原样传给微信去创建菜单是创建不了的），而且微信平台上添加的菜单有很多种，每一种返回的json格式都是不一样的，如果要解析的话是很麻烦的一件事，所以个人觉得既然选择了开发者模式那么还是使用普通的那个查询接口比较好。     2：创建接口；这个接口的作用，顾名思义就是创建接口，但是这个接口不是在原来的基础上创建，而是把全部的菜单全部重新创建，每次调用都是把你需要留下来的菜单加工成固定格式的json然后去传给微信，所以如果你想单个删除，那你就把想要删除的那个菜单去掉，把剩下的重新变成一个json，修改也一样，把你需要改的数据替换掉，然后把全部菜单变成一个json传给微信。     3：删除接口；这个接口是用来删除全部菜单时候用的，不过不会立即生效，调用以后，貌似要到第二天才能看到效果，而且这段时间内你还是能够查询到你之前创建了的菜单。     我的任务是把菜单的增删改查整合到后台管理中去，这里只说下自己的后台的出来方式，请求微信的接口返回的是一个json字符串，我的做法是把这个字符串解析出来，按一定的规则写成一个对象然后添加到list中，增删改的时候都去操作这个list，然后在把list转换回微信要求的格式的json，调用微信的接口去创建菜单（增删改都调用创建接口）。对象部分我的属性分别是id(把list的下标设置为id方便操作)，name（菜单名称)，type（菜单类型，微信自定义菜单的种类有10种貌似），parent（父级菜单名称），SecendLvMenu（二级菜单个数），url（链接型菜单需要)，key(调用推送功能)，mediaid( 调用素材时都要设置madia_id)，sort（排序号）。 以下为json转list的代码，此处的json包是阿里的fastjson包，相当好用： public static List jsonToList(JSONObject obj){ List menulist=new ArrayList (); obj=obj.getJSONObject(“menu”); JSONObject a=new JSONObject(); int num=0; if(obj!=null){ //获取button的json数组 JSONArray array=obj.getJSONArray(“button”);…

这篇文章主要介绍了微信小程序遇到修改数据后页面不渲染的问题解决的相关资料,需要的朋友可以参考下 微信小程序遇到修改数据后页面不渲染的问题解决 前言： 去年从小程序一开始出来到现在，我一直是比较看好和保持一定的关注度的，小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的，这是我第一次有意识的亲眼目睹了一个新技术的发展，还是感觉比较荣幸的。 唱衰小程序？我的观点是肯定不可能，因为现在每天提交审核的小程序还在继续增加，而且有些小程序确实很好用，比如摩拜的扫码骑车，还有我上周去KTV，直接用小程序扫屏幕上的二维码，就可以绑定房间，然后通过小程序点歌，切歌，发表情包等方便好玩的事情，所以，在我看来，有些应用场景是非常适合小程序的，以后生活中的更多场景会更多的应用小程序。 截止到目前，小程序的系列文章写了有十几篇，基本上是解决开发中的一些问题，踩过的坑。我的小程序也已经写的差不多了，但是公司的https加密认证还没有弄好，所以只能暂且搁置在那里了。 数据修改不生效 今天继续要介绍一个setData()的问题。 我们经常会这样写： var that = this; wx.getStorage({   key: 'user',   success: function(res){     console.log(res.data)     that.data.params.uuid = res.data.uuid;     that.data.params.ticket = res.data.ticket;     that.data.params.courseUuid = options.courseUuid;     that.data.params.isCompany = options.isCompany;     that.fetchData();     that.getShareList();   } }) 登录后复制 我们给data对象进行了一些赋值操作，但是发现接着使用这些数据的时候是不对的，我们赋值的数据并没有成功的渲染到页面。找了好久之后我发现，原来要想数据立马生效，必须要调用一下setData()方法才能有用，所以上面的代码修改如下： var that = this; wx.getStorage({   key: 'user',   success: function(res){…

最近，微信小程序团队像打了鸡血似的，不断推出一系列新的小程序功能，以及拓展了不少小程序的入口，使得小程序的运行场景变得越来越丰富。因此，不同的进入场景，必然会带来不同的用户需求，如何能根据这些不同的用户场景，来优化和提升我们的小程序的体验呢？从小程序的基础库API v1.1.0的开始，场景值这一功能被正式的引入。我们可以在小程序的App入口代码中获取该场景值：//在小程序的onLaunch和onShow方法参数中可获取场景值 App({     onLaunch: function (options) {         console.log(“[onLaunch] 场景值:”, options 1. 简介：最近，微信小程序团队像打了鸡血似的，不断推出一系列新的小程序功能，以及拓展了不少小程序的入口，使得小程序的运行场景变得越来越丰富。因此，不同的进入场景，必然会带来不同的用户需求，如何能根据这些不同的用户场景，来优化和提升我们的小程序的体验呢？ 从小程序的基础库API v1.1.0的开始，场景值这一功能被正式的引入。 2. 简介：本篇文章介绍了关于场景值的说明，希望能给您带来帮助 3. 简介：为了满足用户渠道推广分析的需要，公众平台提供了生成带二维码的接口。使用该接口可以获得多个带不同场景值的二维码，用户扫描后，公众号可以接收到事件推送。目前有两种类型的二维码，分别是临时二维码和永久二维码，前者有过期时间，最大为1800秒，但能够生成较多数量，后者无过期时间，数量较少（目前参数只支持1到100000）。两种二维码分别适用于账号绑定、用户来源统计等场景。 4. 简介：微信开发之——Php批量生成带参数的二维码，php参数。微信开发之——Php批量生成带参数的二维码，php参数 带参数的二维码对于渠道营销推广来说是很有用的，可以获得多个带不同场景值的二维 5. 简介：php微信开发之批量生成带参数的二维码，php批量参数。php微信开发之批量生成带参数的二维码，php批量参数 带参数的二维码对于渠道营销推广来说是很有用的，可以获得多个带不同场景值的二维 6. 简介：微信开发之——Php批量生成带参数的二维码，php参数。微信开发之——Php批量生成带参数的二维码，php参数 带参数的二维码对于渠道营销推广来说是很有用的，可以获得多个带不同场景值的二维 7. 简介：官方文档显示场景ID是 32位非0整数。我在开发ID值采用了 $scene_id = time()…

微信上有一种功能吗，就是点击列表字母就能跳转到相应位置，本文主要介绍微信小程序开发之好友列表字母列表跳转对应位置的相关资料,希望通过本文能帮助到大家让大家实现这样的功能，需要的朋友可以参考下，希望能帮助到大家。 微信小程序开发之好友列表字母列表跳转对应位置 前言： 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果。写了个demo，核心部分很简单，所以没多少注释，如果遇到问题就加群问我吧。 核心技术点： 1、小程序scroll-view组件的scroll-into-view， scroll-with-animation. scroll-y属性。 2、小程序的touch事件的应用。 3、Js定时器的应用。 view页面代码： index.wxml  class="container" scroll-y>   class="info" id="info" scroll-with-animation scroll-y scroll-top="200" scroll-into-view="{{toView}}" style="height:{{height}}px;">    class="iitem" id="{{item.id}}" wx:for="{{info_list}}" wx:key="1">    {{item.id}} . {{item.desc}}        class="letter {{active == true ? 'active': ''}}" bindtouchstart='start' bindtouchmove='move' bindtouchend='end'>    class="litem" bindtap='down' data-index="999">    class="litem" wx:for="{{letter_list}}" bindtap='down' wx:for-index="index" wx:key="2" data-index="{{index}}" style="height: {{letter_height}}px;">{{item}}    class="tips" hidden="{{hide}}">{{curView}} 登录后复制 js代码： index.js //index.js //获取应用实例…

1. coverview 中的强制换行 .wrap{ word-break: break-all; word-wrap:break-word; white-space:pre-line; } 登录后复制 2. IOS 阻止页面弹性橡皮筋效果 // taro 为例 import Taro, { Component, Config } from '@tarojs/taro'; export default class HomePage…

你是怎么搭建小程序的？这个划时代的产品快速搭建之法，第一步，搭开发环境;第二步：下载「小相册」源码;第三步：云端部署 server 代码;第四步：准备域名和配置证书… 选择哪个「小程序」Demo？ 在知名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是简单的 API 演示，有的甚至直接把页面数据写在了 json 文件里（分明有网络请求 API）。我想体验的是能够将服务端和小程序端无缝连接起来（体验够爽）的项目。最终，我选择了腾讯云官方推出的「小相册」项目。 「小相册」主要实现了以下功能： 列出对象存储 cos 中的图片列表。 点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 对象存储 COS 中。 轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片。 长按任意图片，可将其保存到本地，或从 对象存储 COS 中删除。 效果演示图（受开发工具的限制，部分功能尚未实现）…