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

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

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

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

    展开全文
  • 主要介绍了微信小程序 引用其他js文件实现代码的相关资料,需要的朋友可以参考下
  • 本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
  • 利用node.js小程序来抓取小程序前端,购买后联系我QQ 1147456940
  • 微信小程序的语法,其实是vue.js语法的裁剪定制版,在数据绑定、自定义组件等很多方面都有相似之处。 以下是一个小程序源码转换步骤指南: 客户端代码转换 新建一个uni-app项目,把之前的app.js、app.wxss的代码,...

    众所周知,微信小程序的语法和uniapp的语法接近,一个是Vue的近亲,一个完全兼容Vue,所以他们相互之间转换应该也是不难的。

    微信小程序的语法,其实是vue.js语法的裁剪定制版,在数据绑定、自定义组件等很多方面都有相似之处。
    以下是一个小程序源码转换步骤指南:

    客户端代码转换

    1. 新建一个uni-app项目,把之前的app.js、app.wxss的代码,挪到app.vue里,分别放到script和style节点下面。
    2. 转换app.json为pages.json,把每个小程序page目录下的index.json(或页面名称对应的json)里的配置取出来,放到pages.json的style下。
    3. pages下每个页面目录放一个vue空文件模板。
    4. 把之前页面的wxss内容复制到vue文件的style中,无需改动。
    5. 把之前页面的js内容复制到vue文件的script中,然后执行如下改动
    6. 之前js里面的data,放到新的data return下。

    之前

    Page({
      data: {
        show1: false
      }
    })
    

    之后

    <script>
        export default {
            data() {
                return {
                    show1: false
                }
            }
        }
    </script>
    
    1. 之前js里面的自定义方法,放到新的method下。
    • 之前
    Page({
        toggleActionSheet1() {
            this.setData({show1: true});
        }
    })
    
    • 现在
    <script>
        export default {
            methods: {
                toggleActionSheet1() {
                    this.show1 = true
                }
            }
        }
    </script>
    
    1. 之前js里面的生命周期函数onLoad、onShow等,直接放到export default下。
    • 之前
    Page({
        onLoad() {
            console.log("page load");
        }
    })
    
    • 现在
    <script>
        export default {
            onLoad() {
                console.log("page load");
            }
        }
    </script>
    
    1. setdata的处理方式
    • 方式一:从 this.setData({loading: false,areaList: response.data.data}) 改为 this.loading = false;this.areaList = response.data.data
    • 方式二:重写setdata方法,如下
    setData:function(obj){  
        let that = this;  
        let keys = [];  
        let val,data;  
        Object.keys(obj).forEach(function(key){  
             keys = key.split('.');  
             val = obj[key];  
             data = that.$data;  
             keys.forEach(function(key2,index){  
                 if(index+1 == keys.length){  
                     that.$set(data,key2,val);  
                 }else{  
                     if(!data[key2]){  
                        that.$set(data,key2,{});  
                     }  
                 }  
                 data = data[key2];  
             })  
        });  
    }  
    
    1. 把之前页面的wxml内容复制到vue文件的template下的view下,然后执行如下改动
    属性绑定从 attr="{{ a }}",改为 :attr="a"
    title="复选框{{ item }}" 改为 :title="'复选框' + item"
    事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"
    阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"
    wx:if 改为 v-if
    wx:for="{{ list }}" wx:key="{{ index }}" 改为`v-for="(item,index) in list"
    
    1. 微信小程序自定义组件处理
      之前引入的自定义组件,需要放到wxcomponents下,并在pages.json里注册。如果这里有js,并且被其他代码引入,要注意修改引用代码的路径指向。如下:
    {
        "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
            {"path": "pages/dashboard/dashboard"},
            {
                "path": "pages/action-sheet/action-sheet",
                "style":{
                    "navigationBarTitleText":"ActionSheet 上拉菜单",
                    "usingComponents":{ //这里单页面引入action-sheet组件
                        "van-action-sheet": "/wxcomponents/vant/action-sheet/index"
                    }
                }
            }
        ],
        "globalStyle": {
            "navigationBarTitleText": "Vant For Uni-app",
            "usingComponents": { //这里给所有页面全局引入了如下组件
                "demo-block": "/wxcomponents/vant/demo-block/index",
                "van-button": "/wxcomponents/vant/button/index",
                "van-cell": "/wxcomponents/vant/cell/index",
                "van-cell-group": "/wxcomponents/vant/cell-group/index",
                "van-icon": "/wxcomponents/vant/icon/index",
                "van-loading": "/wxcomponents/vant/loading/index",
                "van-toast": "/wxcomponents/vant/toast/index"
            }
        }
    }
    

    辅助工具

    str = str.replace(/bindtap/g, '@onclick');
    str = str.replace(/wx:if/g, 'v-show');
    str = str.replace(/src=\'\{\{/g, ":src='");
    str = str.replace(/wx\:key=\"\*this\"/g, ' ');
    str = str.replace(/wx\:key\=\"index\"/g, ' ');
    str = str.replace(/wx:for="{{/g, v-for= "(item,index) in ');
    str = str.replace(/bindinput/g, '@input'); 
    

    wx.是否要替换为uni.?

    关于js api中的wx.,不要全局替换为uni.。因为有的wx的api是微信独有的,替换为uni后,反而在微信下没法用了。

    同时uni-app编译器提供了把wx.编译为不同平台的机制,所以直接使用wx.的api完全可以正常在各端运行。

    所以对于老代码,替不替换不重要,不影响运行,只影响语法提示和转到定义。

    但是新写的代码,还是要用uni.的api,在代码提示、转到定义方面更强大。

    服务相关代码转换

    登陆、支付、推送、定位、地图等服务都是联网服务,它们不止是客户端代码转换就可以直接运行的。涉及服务器接口和配置两方面的工作。

    uni-app在客户端侧提供了统一的代码,比如uni.login、uni.requestPayment,在不同端均可以实现登陆、支付。

    但服务器端的接口不一样,比如微信的App支付和小程序支付的申请开通、服务器接口都不一样,所以配置和服务器接口仍需单独处理。

    比如把小程序转换uni-app后,需要打包发布为app,则需要向微信申请app支付的资质,拿到appkey等信息,填写到uni-app工程的 manifest-app -> sdk配置 -> 微信支付 下面,然后打包才能成效(如果是离线打包,参考离线打包的文件)。同时服务器需要按照微信的App支付的接口再开发对接。

    同样微信小程序里内置的定位、地图,在app上,需要单独向高德等三方服务商申请,否则无法在app里使用这些服务。

    这些sdk申请方式在 manifest -> app sdk配置 下有教程链接。

    其他注意

    文章来源: https://yq.aliyun.com/articles/703548

    展开全文
  • 小程序代码压缩之js压缩

    千次阅读 2018-09-20 15:43:18
    1.创建项目testDemo; 2.在testDemo中按住Ctrl,单击鼠标右键在此处打开命令窗口,输入npm init,直至结束;...5.安装成功后,在当前目录新建gulpfile.js,并输入内容如下: var gulp = require('gulp'...

    1.创建项目testDemo;

    2.在testDemo中按住Ctrl,单击鼠标右键在此处打开命令窗口,输入npm init,直至结束;

    3.输入npm install gulp;

    4.输入npm install  --save-dev gulp-uglify-es;

    5.安装成功后,在当前目录新建gulpfile.js,并输入内容如下:

    var gulp = require('gulp'),
        uglify = require('gulp-uglify-es').default;

    //压缩小程序js文件
    gulp.task('jsmin', function() {
        gulp.src(['src/*/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
    });

    展开全文
  • 微信小程序 JS代码规范自动格式化

    千次阅读 2020-12-31 14:38:10
    本章讲述使用gulp+eslint实现微信小程序项目,代码保存自动格式化。

    本章讲述使用gulp+eslint实现微信小程序项目,代码规范保存自动格式化。

    1、修改项目package.json内的devDependencies(插件依赖),添加如下插件:

    "gulp": "^4.0.2",
    "gulp-cli": "^2.3.0",
    "eslint": "^6.8.0",
    "babel-eslint": "^10.1.0"

    2、修改项目package.json内的scripts字段值,添加如下脚本:

    "gulp": "cd node_modules/gulp && gulp",
    "lint": "eslint --ext .js ./ --fix"

    3、项目根目录添加.eslintrc.js文件,内容如下:

    // 具体可参考eslint官网,进行配置,如下仅供参考

    module.exports = {
      env: {
        node: true,
        commonjs: true,
        es6: true,
        amd: true
      },
      parser: "babel-eslint",
      parserOptions: {
        "ecmaVersion": 6,
        "sourceType": "module"
      },
      extends: [
        "eslint:recommended"
      ],
      globals: {
        "App": true,
        "Page": true,
        "Component": true,
        "Behavior": true,
        "wx": true,
        "getApp": true,
        "getCurrentPages": true
      },
      rules: {
        "semi": [1, "always"], // 语句结束强制分号
        "no-global-assign": "error", //禁止修改全局变量
        "no-trailing-spaces": "error", //不允许在行尾使用尾随空格
        "no-multiple-empty-lines": "error", //不允许多个空行
        "no-else-return": "warn",//如果if语句里面有return,后面不能跟else语句
        "no-empty": "error", //块语句中的内容不能为空
        "no-inline-comments": "error",//禁止行内备注
        "no-var": "error",//禁用var,用let和const代替
        "camelcase": "error",//强制驼峰法命名
        "init-declarations": "error",//声明时必须赋初值
        "space-before-function-paren": "off",//函数定义时括号前面要不要有空格
        "use-isnan": "error", //要判断一个变量是否是 NaN 的时候,一定要用 isNaN 方法
        "comma-dangle": "warn", //行末逗号
        "no-useless-escape": "off", //不允许不必要的转义字符
        "prefer-promise-reject-errors": "off" //要求使用错误对象作为拒绝承诺的原因
      }
    }

    4、项目根目录添加gulpfile.js文件,内容如下:

    // 具体可参考gulp官网,进行配置,如下仅供参考

    const gulp = require('gulp');
    const process = require('child_process');
    
    const lintCode = function(callback) {
      // 终端运行一个 "npm run lint" 的子进程
      process.exec('npm run lint', function(error, stdout) {
        console.log(stdout);
      });
      callback();
    };
    
    gulp.watch('pages/login/index.js', lintCode);
    
    exports.default = function (callback) {
      callback();
    };

    5、至此项目配置已结束,可在终端执行以下操作来启动代码自动格式化功能:

    先运行 npm i 来安装所有添加的依赖插件,然后运行 npm run gulp(运行后该窗口不要关掉) 后即可开始编写项目代码,编写期间每保存一次代码,便会自动根据eslint配置格式化代码一次。

    (如电脑配置较低情况下,不想自动格式化代码,不运行npm run gulp,直接编写代码即可,待最后commit代码时,先运行npm run lint格式化代码一次即可)

     

    附加:如需强制代码commit时必须符合eslint规范,可参考如下进行配置:

    1、修改项目package.json内的devDependencies(插件依赖),添加如下插件:

    "husky": "^4.2.3"
    2、项目package.json内的根对象最后添加如下代码:
    "husky": {
            "hooks": {
                "pre-commit": "eslint --ext .js ./ --fix"
            }
        }

     

    展开全文
  • 填写好小程序的项目目录、AppID(必须是客户已注册好的AppID)、项目名称 2.在app.js中修改id(客户登录后台管理系统的id),app.json中修改页面导航栏标题navigationBarTitleText | 3.配置合法域名(工具 -&...
  • 文章目录小程序登录代码1、小程序登录的wxml代码2、小程序登录的wxss代码3、小程序js代码注册后端代码1、UserService的登录接口2、UserServiceImpl实现类3、controller代码 小程序登录代码 1、小程序登录的wxml...
  • 主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已,需要的朋友可以参考下
  • 小程序代码示例整理

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

    千次阅读 2018-02-06 17:44:24
    微信小程序官方Demo(Hao-Wu/WeApp-Demo) 微信小应用示例代码(phodal/weapp-quick) 微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo) 微信小应用- 掘金主页信息流(hilongjw/weapp-gold) 微信小程序(应用号)...
  • 小程序代码编写到上线

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

    千次阅读 2018-12-07 15:10:14
    在创建一个小程序工程之后,会显示如下图 project.config.json:微信开发者工具的配置信息 app.js:帮助我们去注册一个微信小程序的... 每个小程序界面最多由四个文件组成:js文件(处理界面逻辑和数据交互)...
  • 史上最全的微信小程序代码大全源码下载

    万次阅读 多人点赞 2016-11-17 15:07:26
    小程序QQ交流群:131894955 开发文档:http://shop.jeewx.com/#/doc/rumen 小程序CMS官网源码下载 源码链接:https://gitee.com/jeecg/jeewx-app-cms JAVA版微信管家平台(各种...
  • 微信小程序代码压缩器,支持全部的ES6语法及转换
  • 最全的微信小程序代码大全

    千次阅读 2018-03-11 12:23:13
    最全的微信小程序代码大全微信小程序官方Demo(Hao-Wu/WeApp-Demo)微信小应用示例代码(phodal/weapp-quick)微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)微信小应用- 掘金主页信息流(hilongjw/weapp-gold)...
  • 小程序代码包压缩 策略&方案

    千次阅读 2019-06-14 21:21:18
    微信小程序自推出以来,逐渐发展,目前正受到越来越多的青睐。...由于轻量级特性,小程序代码包体积、可用内存空间、可用存储空间等均受限制。如何在有效支持业务逻辑的同时,尽量减少资源占用,在小程序开发...
  • 小程序代码转成uni-app代码

    万次阅读 2019-05-16 09:36:29
    首先你可以先到uni-app的官网简单看一下对它的介绍,本次文章的介绍是针对简单的微信小程序来进行的转化。 在这之前我们来看一下目录对比 下面就来介绍一下转移的步骤 1、首先你要新创建一个uniapp项目,...
  • 爬取小程序线上代码

    千次阅读 2020-03-26 16:15:42
    因为某种原因,丢失了部分小程序代码,不过程序在线上是正常运行的,于是找到了一款工具,可以爬取线上的代码,在自己慢慢的反编译回来 需要的工具 夜神模拟器(因为有 root 权限,或者有已经 root 的手机亦可) ...
  • 多端技术基于 avm.js 语法进行代码编写,通过 APICloud Studio3 或云编译生成 APP 以及小程序代码。 AVM 跨端框架(APICloud-View-Model)是一个跨端的高性能 JavaScript 框架,更趋近于原生的编程体验。它提供简洁的...
  • 一个将 js++ 代码编译为普通 js 的 Java 小程序。 这个小java程序将帮助您将少量或大量的js++文件编译为纯javascript。 重要提示:由于“nashorn”运行时,您需要 Java 8! 这是一个小例子: CompiledFile f = ...
  • 微信小程序+Java后台开发(详细解释,附代码)

    万次阅读 多人点赞 2019-02-18 12:59:54
    微信小程序+Java后台开发 全部代码链接 链接:https://pan.baidu.com/s/1GiIXKgu76Urr7QfZ-U7W9A 提取码:mpio 通过这个博客,你可以快速的搭建一个微信小程序前端和后台相连的一个功能,在这里我会详细的解说每一...
  • 微信小程序代码高亮

    千次阅读 2018-06-05 10:55:31
    这一个星期一直再想办法解决小程序里面代码显示的问题,刚刚开始使用的是wxparse的开源方法,https://github.com/icindy/wxParse,wxParse是微信小程序富文本解析组件,支持Html及markdown转wxml可视化,我利用...
  • 最后开始反编译了,代码如下: node 反编译js(也就是在我那网盘下载的) 你解压后的小程序路径 node E:\node.js\node-v12.18.3-win-x64\wxappUnpacker-master\wuWxapkg.js E:\node.js\node-v12.18.3-win-x64\axcx\_-...
  • 微信小程序实现代码高亮

    千次阅读 2019-04-06 00:08:39
    因为,当搜索 微信小程序实现代码高亮 后,结果基本都是 微信小程序搜索,关键词高亮 这一类的。Onz ,这可真是在为难我胖虎啊。对于我这种 CV 大神来说,难度高于改参数的,一律送到山西挖煤。 接着上一篇的两种...
  • 使用visual studio code 编写小程序代码

    千次阅读 2020-07-09 10:04:38
    3.因为改变代码时在微信开发者工具中页面实时刷新,所以为了在vs中改变代码也可以实时看到 把小程序中的模拟器单独拿出来 3.1:点击分离窗口 3.2 单独拿出来后 也可以置顶 4.新增页面文件夹 可以在vs中新建...
  • 公司硬性要求代码格式问题,我是用atom编写的微信小程序代码,这就蛋疼了,百度的atom-beautify最多只支持格式化js和json的代码,查了半天没有找到解决办法,就想把插件改一下,因为wxml和wxss与xml和css没什么区别...
  • 微信小程序识别html代码

    千次阅读 2018-11-20 18:11:13
    通过接口获取到的数据,是用富文本编辑器写成的有html标签的格式,实现在小程序中识别html代码 1.从该网址上下载wxParse文件夹,放入小程序中,路径自选 https://github.com/icindy/wxParse  2. 在使用的View中...
  • 前端需要传递用户授权的 code private String appId = "111"; private String secret = "99999999"; @Autowired private RestTemplate restTemplate;... } 如何获取AppID(小程序ID) 和 AppSecret(小程序密钥) ?

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 439,781
精华内容 175,912
关键字:

js小程序代码