小程序

点击开发者工具左侧导航的「编辑」，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js 后缀的是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。 下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。 app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。 app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口  背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。 app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。 相信看了本文案例你已经掌握了方法，更多精彩请关注米云其它相关文章！ 推荐阅读： 以上就是微信小程序开发怎样编写代码的详细内容，更多请关注米云其它相关文章！

本篇文章给大家带来的内容是关于微信小程序如何渲染html内容（示例讲解），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 最近又做了一个新的小程序关于物流订单查询 遇到了一个小问题：数据中返回电话号码的字符串识别出来并且高亮和可以绑定事件。比如数据中包含您的派送员黄xx正在派件，电话：137xxxx41460已经在派送。其中就要识别出137xxxx41460并且绑定点击事件可以点击拨打电话号码。 对于这个功能搜集了不少资料其中包含了3个解决方案但是各有优缺点因此记录下来 立即学习“”； wxParse小程序刚上线那会儿，是无法直接渲染HTML内容的，于是就诞生了一个叫做「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据，再通过小程序的模板把该数据渲染出来。 rich-text后来，小程序增加了「rich-text」组件用于展示富文本内容。然而，这个组件存在一个极大的限制： 组件内屏蔽了所有节点的事件 。也就是说，在该组件内，连「预览图片」这样一个简单的功能都无法实现。 web-view再后来，小程序允许通过「web-view」组件嵌套网页，通过网页展示HTML内容是兼容性最好的解决方案了。然而，因为要多加载一个页面，性能是较差的，个人小程序也是没法用webview。 因为我这个只是需求只是需要识别出来电话号码并且不是那种复杂的字符模板。因此参考wxparse 的原理自己写了一个关于电话号码识别的功能。 效果如下： 技术重点就是 1、在数据返回后对于字符串用正则(/(1+)|(d{9,14})|(d{3,4}-d{6,10})/g)识别出电话号码存在一个新的字段并且表示为type:phone ，不是电话号码的字符就放到另外一个字段并且表示为type:text.数据结构如图所示 2、新建一个关于字段读取的模板 <template name="wepyhtml"> <block wx:for="{{wxmlData}}" wx:key=""> <template is="wxml" data="{{item}}"></template> </block> </template> <template…

这篇文章主要介绍了微信小程序 lol 英雄介绍开发的相关资料,需要的朋友可以参考下 最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 　　1.下载微信开发者工具 官网链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下载完成之后默认安装即可 　　2.新建项目 打开微信开发者工具,(首次需要微信扫码登录),如下图所示,点击添加项目,然后依次输入APPID,项目名称,并选择你的项目所在的目录(本地目录),如果没有AppID,选择无APPID即可(部分功能受限)                            　　3.编写代码 我的项目结构如下:  目录解释:pages这个文件夹放的是你的这个小程序所涉及到所有页面.image文件夹放图片.app.json是一个小程序的入口配置文件,一些全局设置都在这个文件里面. 我们可以看到detail这个目录下有四个文件: (1)  detail.js是detail.wxml这个页面涉及到的js处理的文件 (2) detail.json是detail.wxml的配置文件,比如我们可以设置导航条的标题 (3) detail.wxml是小程序索要展示的页面,UI的架子. (4) detail.wxss是detail.wxml的样式文件,类似于css文件 　　3.1 接下来我们看一看app.json文件: {  "pages":[   "pages/index/index",   "pages/logs/logs",   "pages/detail/detail",…

 如果用户曾经在该公众号有支付行为，关注的时候eventkey中将包含上次交易订单号，如 last_trade_no_4002752001201704258347703919 登录后复制 <xml>     <tousername></tousername>      <fromusername></fromusername>      <createtime>1493702623</createtime>      <msgtype></msgtype>      <event></event>      <eventkey></eventkey> </xml> 登录后复制 【相关推荐】  1. 2. 以上就是EventKey的subscribe关注事件示例的详细内容，更多请关注米云其它相关文章！

这篇文章主要介绍了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下 本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法。分享给大家供大家参考，具体如下： 很多项目都会有消息记录页，即列表页，紧接着就是点击列表的某一项进入到消息的详情页，这里承接上一篇文章，继续分享如何从列表的item项跳转到下一个页面。 一、效果图 从左边的列表页调到右边的详情页 二、页面之间的跳转 首先要看的是页面的跳转，微信小程序有三种跳转方式可供选择： 1、保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 wx.navigateTo({  url: 'test?id=1' }) 登录后复制 2、关闭当前页面，跳转到应用内的某个页面。 wx.redirectTo({  url: 'test?id=1' }) 登录后复制 3、跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.switchTab({  url: '/index' }) 登录后复制 注：wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages())…

  微信开发之准备阶段 所需资源： 1、微信公众平台账号 2、百度BAE平台账号 一、    微信公众账号申请   登录微信公众平台    在右上角有注册 填写相关资料进行注册，在此我注册的是个人订阅号，如果有公司信息可以注册服务号。另外由于个人订阅号接口有限，对于个人开发不是很有利，微信还提供了测试账号，专为开发人员使用，进入如下地址申请测试号           测试号权限对于开发来说还是很不错的~ 由于微信接入开发者模式需要提供可供微信服务器发送请求的url地址所以你的服务端必须能接入公网，可以使用花生壳等dns服务商，在此由于我用的是小区宽带不能解析，所以改用了百度的bae，没有公网ip的可以试试，初步接入测试感觉挺方便的，，用百度账号就可登陆，需要注意的是在bae使用中要用svn等管理应用，但是用户名又不支持中文所以如果百度账号是中文的朋友还是重新注册一个英文的吧， 接下来准备工作做完了就开始编写代码成为微信公众平台的开发者吧，以下代码出自柳峰老师博客 核心类： package com.vlive.action.connector;   import java.io.IOException;   import java.io.PrintWriter;   import javax.servlet.ServletException;   import javax.servlet.http.HttpServlet;   import javax.servlet.http.HttpServletRequest;  …

ES6新增了很多对于国际化的支持，比如时间格式，货币格式，数字格式等。 Internationalization & Localization(国际化与本地化)是指修改软件使之能适应目标市场的语言、地区差异以及技术需要。 国际化是指在设计软件，将软件与特定语言及地区脱钩的过程。当软件被移植到不同的语言及地区时，软件本身不用做内部工程上的改变或修正。本地化则是指当移植软件时，加上与特定区域设置有关的信息和翻译文件的过程。 Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比，数字格式化，日期和时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。 Intl.Collator()： 语言敏感的字符串对比功能对象，collators 的构造函数 Intl.DateTimeFormat()：语言敏感的日期和时间格式化功能对象的构造函数 Intl.NumberFormat()：语言敏感的数字格式化功能对象的构造函数 Collation(排序规则) 对于字符串集合的排序和检索，可以根据地区和Unicode为参数进行排序。 Number Formatting(数字格式化) 可以根据数字分组和本地的分隔符，对数字进行格式化。 Currency Formatting(货币格式化)…

摘要: 在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这 … 在小程序的开发过程中，页面布局中，我们经常会遇到一些图片处理的问题，比如，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片，让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度，动态的设置图片的高度和宽度，是图片布局的高度和宽度和原始图片的高度和宽度相等。 1.图片等比例缩放工具 //Util.js   class Util{       /***       * 按照显示图片的宽等比例缩放得到显示图片的高       * @params originalWidth  原始图片的宽       * @params originalHeight 原始图片的高       * @params imageWidth     显示图片的宽，如果不传就使用屏幕的宽       * 返回图片的宽高对象      ***/       static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){           let imageSize = {};           if(imageWidth){               imageSize.imageWidth = imageWidth;               imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;           }else{//如果没有传imageWidth,使用屏幕的宽               wx.getSystemInfo({                     success: function (res) {                         imageWidth = res.windowWidth;                         imageSize.imageWidth = imageWidth;                       imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth;                   }                 });  …

摘要: 在微信小程序的开发过程中，我们可定会遇到页面间相互跳转的需求，那么如何监听页面跳转之间的事件呢？我们在之前的一篇文章：艺龙微信小程序框架组件研究（附源码）为例，来看一看小程序在页面之间相互跳转时的事件 … 在微信小程序的开发过程中，我们可定会遇到页面间相互跳转的需求，那么如何监听页面跳转之间的事件呢？我们在之前的一篇文章：艺龙微信小程序框架组件研究（附源码）为例，来看一看小程序在页面之间相互跳转时的事件机制。 我们知道小程序提供打开新页面、页面重定向、页面返回、tabBar切换四种改变视图的机制，托管了页面的生命周期，并为应用提供了相应的生命周期事件，方便应用各阶段的业务处理，但页面之间相互跳转并没有相应的事件机制，例如—— 1、A页面打开二级页B，B页面做了一些操作，要通知A页面做相应的处理。 2、从B页面携带一些数据，返回到A页面 以上两种场景很常见，归结为页面间如何方便的进行交互，当然我们可以通过页面跳转传参或全局数据对象来达到目的，但是使用上有些束缚(转换参数或维护全局对象)！ 所以在elong小程序项目中采用事件机制解决这一问题。我们重写了navigateToAPI，A页面调用该接口进行页面跳转后，方法返回给A页面一个事件对象 event，该对象可以注册自定义事件，目标页面(B页面)可以按照业务需求触发事件响应，同时将相关数据作为参数传递到监听处callback。 A页面 B页面 API Event 部分代码如下：     Page({         data: {             userInfo: {}         },         navigateToHttp: function () {             var event = api.Navigate.go({                 url: '../http/index',                 params: {                     name: 'billy'                 }             });             event.on("listok", function (params) {                 console.log(params)…

这篇文章主要介绍了微信小程序开发图片拖拽实例详解的相关资料,需要的朋友可以参考下 微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view>    <view>      <image>      </image>    </view>  </view> 登录后复制 2.编写页面样式：moveimg.wxss .container {    box-sizing:border-box;    padding:1rem;  }  .cnt{    width:100%;    height:15rem;    border: 1px solid #ccc;    position:relative;    overflow: hidden;  }  .image-style{     position: absolute;     top: 0px;     left:0px;     height:100%;   }…