精华内容
下载资源
问答
  • 没有灵魂的微信小程序代码转支付宝小程序代码微信小程序与支付宝小程序直面代码的替换内容功能快捷键插入链接与图片如何插入一段漂亮的代码片导出与导入导出导入 微信小程序与支付宝小程序 作为一个微信小程序的半...

    没有灵魂的微信小程序代码转支付宝小程序代码

    微信小程序与支付宝小程序

    作为一个微信小程序的半新手,支付宝小程序的全新手! 在公司安排的这次任务中,需要把已经上线的支付宝小程序更新为和微信小程序一样的版本。就只有打开微信和支付宝的开发者对比两个版本的差异然后改改改了。如果是完全生成一个支付宝小程序项目,可参考:https://jingyan.baidu.com/article/a948d651c3ae330a2ccd2e77.html

    以下仅为个人要修改项目中所遇到的总结,如果没有你想知道的就还是去对比文档吧。这是本人第一次写博客,有错误的或者要添加的请大家多多指点

    微信小程序开发文档地址:https://developers.weixin.qq.com/miniprogram/dev/
    支付宝小程序开发者文档地址:https://docs.alipay.com/mini/developer/getting-started

    直面代码的替换内容

    两个小程序大体都是一样的,要修改的不过于有引用的组件名称,页面渲染的指令,点击事件的名称,调用的API等。如果是版本更新,只修改部分页面。一定要记得检查新增的页面,图片等。是否有的没有添加。

    1. 引用文件的名字 :把页面中的wxml改为axml;wxss改为acss

    2. AXML中的修改:选中所有的wx:替换为a:
      (1)在axml搜索bind;将bindTap替换为onTap,catchtap替换为catchTap。
      (2)一些常用组件的事件名称或属性如:scroll-view的bindscrolltolower替换为onScrollToLower,bindscrolltolower替换为onScrollToUpper。picker的bindchange替换为onChanges。checkbox的bindchange替换为onChange。form表单的bindsubmit,bindreset,form-type改为onSubmit,onReset,formType 。
      (3)常见规律是把bind替换为on,然后是以驼峰式命名。可以搜索bind进行查看。别的组件我没有一一列出来。项目有用到的话可以对照文档进行修改。

    3. js的修改:js中所有的wx.替换为my.
      (1) API名称或属性:showToast弱提示框,内容属性title替换成content。makePhoneCall拨打电话的参数phoneNumber替换成number。微信小程序设置导航栏API分别对应有wx.setNavigationBarTitle,wx.setNavigationBar,wx.setNavigationBarColor等,支付宝是在一个API中my.setNavigationBar通过入参进行修改。
      (2)图片的API:在选择图片chooseImage成功后返回的参数由tempFilePaths替换成apFilePaths。对图片进行压缩compressImage中。
      微信的对应的参数为:在这里插入图片描述
      支付宝对应参数为:在这里插入图片描述
      (3)支付的API:在验证支付是否成功时。
      微信对应返回:在这里插入图片描述 官方文档地址:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5
      支付宝对应返回:**加粗样式**
      官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.requestPayment.html
      发起支付的api名称和参数时完全不同的,详情见连接。
      (4)内置地图选择地理位置的chooseLocation:调用这个api肯定是需要用户先授权的。(如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;如果用户已授权,可以直接调用接口;如果已经拒绝授权的话就需要调用wx.openSetting 引导开启授权)
      对于支付宝来说,我也不知为何是可以直接调用的,不用重新引导授权之类的。它也不像微信,在一次申请用户授权后就需要调用openSetting 重新授权。官方文档中也没找到openSetting 这个API。有一个权限引导的my.showAuthGuide。但是里面对应不同设备权限不同。这个有大神知道的希望指点一二。在这里插入图片描述
      值得注意的是,在手机微信小程序中获取位置时有一个常用位置。选择这条地理位置返回的信息与别的位置返回数据是不同的(可能没有省市区)。需要用经纬度重新获取详细地址。在这里插入图片描述 支付宝小程序的位置选择在开发者工具中返回参数是文档所写那样,但是在手机上参数是如此返回的。在这里插入图片描述
      因此,最好用手机打开调试器,输出看一下。并且尤为重要的是Ios和Androidos常用位置返回参数信息是不同的。

    以上是在个人项目中所遇到的总结,大家可以先替换文件内容,直到页面不报错。在查看页面功能,有问题再对应文档进行比较。只是支付宝的文档着实差一点。等熟悉文档大致内容后和真机一起调试就不会再那么迷惑啦。

    功能快捷键

    选中所有匹配项:Ctrl+shift + L
    选中下一个匹配项:Ctrl + D
    查询:Ctrl + F

    展开全文
  • html5代码如何小程序代码

    千次阅读 2018-12-17 17:57:00
    插件源码 链接:https://pan.baidu.com/s/1pGY8ZsdESaQGEzoEgpb_Rw... 放到与pages文件夹同级目录下 js中调用 //引入 var wxParse = require('../../wxParse/wxParse.js');...wxParse.wxParse('article', 'html',...

    插件源码

    链接:https://pan.baidu.com/s/1pGY8ZsdESaQGEzoEgpb_Rw 提取码:s1ix 

    放到与pages文件夹同级目录下

    js中调用

    //引入

    var wxParse = require('../../wxParse/wxParse.js'); 
    //调用(个人方法)
    wxParse.wxParse('article', 'html', res.body, this, 5);
     
    wxml中调用
    //头部引入
    <import src="../../wxParse/wxParse.wxml"/>
     
    //下面调用(注:是固定格式)
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
     
     
     

     

    转载于:https://www.cnblogs.com/shiguangliushi/p/10132926.html

    展开全文
  • 小程序插入html代码

    万次阅读 2018-07-13 10:45:25
    一、首先,html 分 2 种情况: 1、我在做详情页开发的时候发现获取到的...而如果使用 rich-text,则需要先转译成正常 html 代码,再插入才能成功(这种方法我用以下链接中的内容中包含了例子,确实可行)。 (反转译...

    一、首先,html 分 2 种情况:
    1、我在做详情页开发的时候发现获取到的数据是 转译后的 html字符串,如下图:

    这种 转译后的 html字符串,左括号、右括号、&符号等都被转译了,这种代码,使用下文中的 wxParse 可直接插入。
    而如果使用 rich-text,则需要先转译成正常 html 代码,再插入才能成功(这种方法我用以下链接中的内容中包含了例子,确实可行)。
    (反转译方法在我另一篇博客里面:转译html链接
    我使用该反转译方法确实可以将 html转译字符串 转译为正常 html代码,这是经过测试的,,但是我自己项目中获得的大段详情页的 html转译字符串 在经以上代码翻译后再放入 rich-text 中却不能显示出来,目前原因尚未清楚,如有同行大神知道个中蹊跷,忘留言指教,我将在此再次更新。

    2、获得的是正常 html 代码,如下图:

    二、插入 html 代码的 3 种方法:

        1、使用组件 web-view:(这种方法只能插入完整网页)

            

        2、使用组件 rich-text:
            官方链接:点击打开链接
            js 页面:

    // 插入正常 html 代码
    var article = '<div style="text-align:center;">《静夜思》· 李白<br />床前明月光,<br />疑是地上霜。 <br />举头望明月, <br />低头思故乡。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br /></div>';
    that.setData({ detailInfo: article });
    
    // 插入 html 转译字符串
    var html = '&lt;div&gt;&lt;p&gt;第一行&lt;/p&gt;&lt;p&gt;第二行&lt;/p&gt;&lt;/div&gt;';
    var newHtml = this.htmlEscapt(html);
    this.setData({ detailInfo: newHtml });
    htmlEscape: function(html){
        var reg = /(&lt;)|(&gt;)|(&amp;)|(&quot;)/g;
        return html.replace(reg,function(match){
    		switch(match){
    			case "&lt;":
    			    return "<";
    			case "&gt;":
    			    return ">"
    			case "&amp;":
    				return "&";
    			case "&quot;":
    				return "\""
    		}
    	});
    }

           wxml 页面:

    <rich-text nodes="{{detailInfo}}"></rich-text>  

        3、使用 wxParse:点击打开链接(wxParse使用详解)
            wxParse下载链接:点击打开链接
        在此声明一点,使用这个方法,不管下文中的 article 是正常 html 代码,还是 html 转译字符串,都可直接使用。
        此外,我在项目中遇到的是将大段的 html 转译字符串 转译为小程序可识别内容,用的就是 wxParse,,只是在项目中遇到了几个问题,如果你也有遇到,请点击以下链接:点击打开链接
        实例:
        wxss 页面:

    @import "/templates/wxParse/wxParse.wxss";

        js 页面:

    var WxParse = require('../../../templates/wxParse/wxParse.js');
    Page({
      data: { },
      onLoad: function (options) {
        // var atricle = '&lt;div&gt;&lt;p&gt;第一行&lt;/p&gt;&lt;p&gt;第二行&lt;/p&gt;&lt;/div&gt;';
        var article = '<div style="text-align:center;">《静夜思》· 李白<br />床前明月光,<br />疑是地上霜。 <br />举头望明月, <br />低头思故乡。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br /></div>';
        WxParse.wxParse('article', 'html', article, that, 5); 
      },
    })

        wxml 页面:

    <import src="../../../templates/wxParse/wxParse.wxml"/>
    <view>
        <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
    </view>

     

    展开全文
  • 微信小程序识别html代码

    千次阅读 2018-11-20 18:11:13
    通过接口获取到的数据,是用富文本编辑器写成的有html标签的格式,实现在小程序中识别html代码 1.从该网址上下载wxParse文件夹,放入小程序中,路径自选 https://github.com/icindy/wxParse  2. 在使用的View中...

    通过接口获取到的数据,是用富文本编辑器写成的有html标签的格式,实现在小程序中识别html代码

    1.从该网址上下载wxParse文件夹,放入小程序中,路径自选

    https://github.com/icindy/wxParse 

    2. 在使用的View中引入WxParse模块

    var WxParse = require('../../wxParse/wxParse.js');

    3.在使用的Wxss中引入WxParse.css,也可以在app.wxss全局引入

    @import "/wxParse/wxParse.wxss";

    4.在相应的js文件中

    var article = '<div>我是HTML代码</div>';

    WxParse.wxParse(bindName , type, data, target,imagePadding) 

    (1).bindName绑定的数据名(必填) 

    (2).type可以为html或者md(必填)

    (3).data为传入的具体数据(必填)

    (4).target为Page对象,一般为this(必填) 

    (5).imagePadding为当图片自适应是左右的单一padding(默认为0,可选) 

    例如:var that = this;

    WxParse.wxParse('article', 'html', article, that, 5);

    5.在相应的wxml文件中

    // 引入模板

    <import src="你的路径/wxParse/wxParse.wxml"/>

    //这里data中article为bindName

    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

     

    获取到的数据里可能有图片,如果图片路径是绝对路径的话,可以在wxParse文件夹下的html2json.js文件中修改地址

    if (node.tag === 'img') {

    node.imgIndex = results.images.length;

    var imgUrl = node.attr.src;   改为var imgUrl = 服务器地址 + node.attr.src;

    if (imgUrl[0] == '') {

    imgUrl.splice(0, 1);

    }

    imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);

    node.attr.src = imgUrl;

    node.from = bindName;

    results.images.push(node);

    results.imageUrls.push(imgUrl);

    }

    展开全文
  • 我们用微信小程序官方开发工具开发小程序时,由于官方开发工具不够智能,所以我们通常会用webstorm来开发小程序。这里就涉及到两个问题 - 1,代码自动补全 - 2,实时编译查看小程序运行效果 一,先来解决...
  • 小程序解析html网页标签, 有3种方法: 1) 使用 wxPasr 解析html 2) 单独解析 html标签 3) 使用最新的小程序组件 web-view 今天子恒老师跟你分享第一种方法 wxpasr解析html效果 一、 wxParse 把...
  • 小程序代码示例整理

    千次阅读 2019-04-19 16:30:30
    以下是分享了一部分小程序代码示例,希望能够帮助到你们,抓紧收藏吧 微信小程序知乎日报 https://github.com/myronliu347/wechat-app-zhihudaily 微信小程序购物车案例 ... 微信小程序–聊天室功能 ...
  • 微信小程序 -- 插入html代码

    千次阅读 2019-10-23 10:37:13
    对于在微信小程序开发中,插入html代码,有两种做法,具体如下: 一.方法1:使用微信小程序组件rich-text 1. js文件中 content内容为html代码,使用replace() 方法进行字符的替换,达到预期的效果(不需要改,...
  • 微信小程序代码高亮

    千次阅读 2018-06-05 10:55:31
    这一个星期一直再想办法解决小程序里面代码显示的问题,刚刚开始使用的是wxparse的开源方法,https://github.com/icindy/wxParse,wxParse是微信小程序富文本解析组件,支持Html及markdownwxml可视化,我利用...
  • 我们在上一节课程中提到, 小程序解析html网页标签, 有3种方法: 1) 使用 wxPasr 解析html 2) 单独解析 html标签 3) 使用最新的小程序组件 web-view 今天子恒老师跟你分享第一种方法 wxpasr解析html效果 ...
  • 小程序代码编写到上线

    千次阅读 2018-08-14 17:39:06
    小程序的很多知识点都是和html,css,js相通的,也参考了一些框架的思想:数据绑定,组件化开发,生命周期等等,不是很难,有一定的html, css, js基础再熟悉一下小程序开发文档就可以开发。这次开发的小程序项目相对...
  • 史上最全的微信小程序代码大全源码下载

    万次阅读 多人点赞 2016-11-17 15:07:26
    小程序QQ交流群:131894955 开发文档:http://shop.jeewx.com/#/doc/rumen 小程序CMS官网源码下载 源码链接:https://gitee.com/jeecg/jeewx-app-cms JAVA版微信管家平台(各种...
  • 因为目前刚刚入职,可能没什么工作量,都是修修改改功能,所以自己学习小程序开发,想做一个新闻类的小程序,但是html跟wxml的代码又有所不同,所以查了一下资料,有些还是写的不全的,所以我总结了一下;...
  • 微信小程序代码demo

    千次阅读 2017-01-09 21:33:30
    微信小程序代码
  • 最全的微信小程序代码大全

    千次阅读 2018-03-11 12:23:13
    最全的微信小程序代码大全微信小程序官方Demo(Hao-Wu/WeApp-Demo)微信小应用示例代码(phodal/weapp-quick)微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)微信小应用- 掘金主页信息流(hilongjw/weapp-gold)...
  • 微信小程序支持富文本编辑器代码 一:下载:https://github.com/icindy/wxParse 二:将wxParse文件夹粘贴到项目 三:引入文件 index.js文件中引入 var WxParse = require('../wxParse/wxParse.js'); 内容代码 ...
  • 微信小程序中显示 HTML 代码

    千次阅读 2020-02-28 18:39:26
    通过wxParse 实现 一.wxParse 下载 ...将 wxParse 文件夹放在 小程序项目中。 二. 引入(注意路径) 1.在 wxss 中引入 css @import "/wxParse/wxParse.wxss"; 2.在 wxml 中引入 <import src="...
  • 微信小程序代码体积压缩到最小

    千次阅读 2019-02-15 17:12:01
    如果是图标的话,阿里的图标真的很好用,在小程序中使用也非常的方便。 2.优化代码逻辑,这个可能要求有一点高,减少不必要的代码,避免出现重复的代码。同时页面书写时候也要尽量避免不必要的组件嵌套,能用一个 ...
  • HTML5如何小程序

    万次阅读 2018-09-10 13:45:41
    小程序独立出来了很多原生APP的组件,这对于HTML5的老兵是一种痛苦,小程序自己开发了一套WXML标记语言和WXSS样式语言,并非直接使用标准的HTML5+CSS3,小程序与传统HTML5还是有明显的区别。   那对于HTML5应用的...
  • 微信小程序html格式转换详解

    千次阅读 多人点赞 2020-05-25 13:30:34
    在毕设的过程中,把项目迁移到小程序中,遇到了html格式的博客内容,在小程序中直接以标签的格式显示出来了,并没有进行标签格式的转换,因此记下该问题并解决。问题的截图如下: 解决步骤 首先要先下载wxParse:...
  • 小程序代码包大小超出限制的解决办法 方法(一)https://www.cnblogs.com/web1/p/8926807.html 方法(二)https://blog.csdn.net/weixin_33751566/article/details/93172461
  • 小程序代码wxml和html的转化(网站)

    千次阅读 2018-12-17 17:08:00
    https://vlily.github.io//originality/wxmlto.html 转载于:https://www.cnblogs.com/baobaoa/p/10132569.html
  • 最全的微信小程序代码

    万次阅读 多人点赞 2019-05-05 21:41:53
    wx-gesture-lock微信小程序的手势密码 ...shitoujiandaobu小程序:石头剪刀布(附代码说明) audiodemo微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star微信小程序开发之五星评分 swit...
  • http://pan.baidu.com/s/1jHQstaI项目说明:微信小程序:实现一个移动端商城目录结构:images — 存放项目图片 pages — 存放项目页面相关文件 style — 存放独立wxss样式文件,可import引入 utils — 存放utils...
  • 微信小程序的支付代码
  • 微信小程序最基本代码入门

    万次阅读 多人点赞 2018-07-23 11:30:29
    ** 微信小程序的简单实现 ...小程序是最近十分受欢迎的一项创新,因其简单方便,不需要大内存下载。...所以小程序和小游戏的用户日益剧增。...小程序和小游戏是在开发工具中实现的,就像C语言,c++,Java等的语...
  • 代码下载地址: http://pan.baidu.com/s/1miHIuBe基于微信小程序的旅行类的应用 开发工具 微信Web开发者工具 0.10.101100源代码下载地址: http://pan.baidu.com/s/1miHIuBe...
  • 微信小程序仿今日头条小程序端界面和代码演示

    千次阅读 热门讨论 2018-01-30 11:28:47
    基于帝国cms 7.5 utf-8版的今日头条小程序下载地址: http://www.sjmoban.com/sucai/3.html 程序本版包含: 1.获取分类列表 2.获取新闻列表 3.查看新闻内容 4.列表左右滑动,动态加载,滑到底部自动加载...
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">&l...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,113,395
精华内容 445,358
关键字:

html转小程序代码