• 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,...

    微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看.

    我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化.



    现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢.

    微信小程序代码编辑快捷键

    常用快捷键

    格式调整

    • Ctrl+S:保存文件
    • Ctrl+[, Ctrl+]:代码行缩进
    • Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
    • Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
    • Shift+Alt+F:代码格式化
    • Alt+Up,Alt+Down:上下移动一行
    • Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
    • Ctrl+Shift+Enter:在当前行上方插入一行

    光标相关

    • Ctrl+End:移动到文件结尾
    • Ctrl+Home:移动到文件开头
    • Ctrl+i:选中当前行
    • Shift+End:选择从光标到行尾
    • Shift+Home:选择从行首到光标处
    • Ctrl+Shift+L:选中所有匹配
    • Ctrl+D:选中匹配
    • Ctrl+U:光标回退

    界面相关

    • Ctrl + \:隐藏侧边栏


    展开全文
  • 那些年用node接入微信走过的坑之(一)—成为开发者微信开发好像是现在各大项目必须接入的东西了,微信作为人们日常使用的软件成为现在最大的流量入口,微信的接入成为各大开发者非常头大的问题,那么这么久才想到要...

    初衷

    微信开发好像是现在各大项目必须接入的东西了,微信作为人们日常使用的软件成为现在最大的流量入口,微信的接入成为各大开发者非常头大的问题,那么这么久才想到要记录一些东西出来,也希望自己走过的坑分享给大家,可以帮助初接触微信接入的同学更快的进行开发。

    或许这些没有太大的作用,不过也作为激励自己的一种方式吧,文笔不好,请大家见谅。


    微信板块简介

    做微信开发首先要分清公众平台,微信开发者平台,企业微信。

    1. 公众平台
      公众平台是大家最熟悉的,很多人都有自己的公众平台,利用公众平台我们可以接收到粉丝发来的消息,开微店,给粉丝发推送等等操作,那么开发者可以通过监听微信操作来完成我们自己想做的事。

    2. 微信开放平台
      开放平台是微信专门为开放者定制,开发者可以根据自己的需求来完成不同的操作,如下图。
      如图,微信
      移动应用:比如开发app的自动登录
      网站应用:webApp,web微信的授权登录(例如石墨文档)
      公众账号: 绑定我们的公众平台
      公众号第三方平台:可以成为微信的第三方,获取微信权限授权,帮助其他公众号设置(例如微盟)

    3. 企业微信
      企业微信号和微信开放平台非常像开发者可以定制自己的企业号,也可以成为第三方的提供商,得到其他的企业授权后可以操作其他的企业号。(使用代表:魔学院)

    成为开发者

    这是本文的重点内容,接入微信,我们首先要成为微信的开发者吧,者里先将如何通过验证成为开发者,代码有参考别人的,这里还是重要讲步骤。

    1. 微信设置
      ...
      这个url很重要,微信会通过请求你的服务器来进行验证。微信会通过get请求来进行。要记住是—–get
      那么先写一个get的路由了。
    2. 微信验证
      get路由执行以下的方法getCheckSignature
      微信加密的方式是sha1
    function getCheckSignature(req, res) {
        var signature = req.query.signature;
        var timestamp = req.query.timestamp;
        var nonce = req.query.nonce;
        var echostr = req.query.echostr;
    
        var token = "这里是你在上一个步骤中设置的Token";
    
        var sha1 = crypto.createHash('sha1');
        var sha1Str = sha1.update([token, timestamp, nonce].sort().join('')).digest('hex');
        console.log(sha1Str)
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end((sha1Str === signature) ? echostr : '');
        return res;
    }
    
    // 随机字符串产生函数
    function _createNonceStr() {
        return Math.random().toString(36).substr(2, 15);
    };
    
    // 时间戳产生函数
    function _createTimeStamp() {
        return parseInt(new Date().getTime() / 1000) + '';
    };
    
    
    function _calcSignature(ticket, noncestr, ts, url) {
        var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp=' + ts + '&url=' + url;
        var sha1 = crypto.createHash('sha1');
        var sha1Str = sha1.update(str).digest('hex');
        return sha1Str;
    }
    

    点击确认,如果微信得到验证通过,那么我们设置成功
    3. 成为开发者后我们做什么
    如果验证成功后,微信将通过该url方式对用户的操作进行转发,比如接受用户消息,接受用户的关注和取消关注事件,开发者可以利用这个url做一些操作。


    结语:
    这是成为微信开发的第一步,网上大家提供了很多资源,包括代码,我希望将这些系统的整合起来。

    有兴趣的同学可以使用更简洁的方式。这里感谢cnode,大神们提供了node-wechat,node-wechat-api等更加便捷的工具。

    ITDogFire–sky

    展开全文
  • 微信小游戏小程序图片音频在开发工具上能够显示播放,当上传移植道手机上测试却不能正常运行 代码什么的就免了。 直接讲原因: 相对路径绝对路径的问题。 怎么讲呢。 通常情况下我们有过网页开发经验的...

    我最近无聊也打算开发一个微信小游戏玩玩,万一要是火了呢?但是我今天遇到了一个问题:

    微信小游戏小程序图片和音频在开发工具上能够显示和播放,当上传移植道手机上测试却不能正常运行

    代码什么的就免了。

    直接讲原因:

    相对路径和绝对路径的问题。

    怎么讲呢。

    通常情况下我们有过网页开发经验的同学知道,相对路径比绝对路径更为灵活和便于移植(网页开发已经很久没有了,我应该没记错

    但是

    微信小游戏很奇怪,相对路径会出错,而绝对路径不会。绝对路径的起点是开发项目的文件夹为起点。

    闲谈几句,由于没有好的教程我开始自己摸索这个微信小游戏和小程序的开发,API也不够好用,只能一点点摸索,我排除了很多方法:语法错误,配置错误,用网络文件和本地文件还有默认板块做比较终于找出了原因。

    举个例子:

    你的图片路径是:

    项目目录/res/bg.png的话。调用他的js文档是:项目目录/js/run.js的话

    相对路径为:./res/bg.png。这在开发工具上是可以实现的,但是上传之后就不行了。

    这个时候就必须使用绝对路径:res/bg.png

    这个可以说是一个bug或者上传的设置问题。不管如何问题总算解决了。

    展开全文
  • 当你的小程序有用户提交(评论、文章、图片)时,如果你的代码没有过滤...一、启动微信开发者工具 1、在项目中新建一个文件夹例如functions, 2、找到项目中的prject.config.json配置文件,加入cloudfunctionRo...

    当你的小程序有用户提交(评论、文章、图片)时,如果你的代码没有过滤敏感词汇,将会审核不通过,幸好官方提供了API,方便了很多,废话不多说,干!

    本文只有文字过滤

    本文采用的是云函数方法

    为了不浪费各位的时间特此说明

    一、启动微信开发者工具

    1、在项目中新建一个文件夹例如functions,

    2、找到项目中的prject.config.json配置文件,加入cloudfunctionRoot:'文件夹名',如下图:

    3、右键functions文件夹名,新建Node.js云函数,起名为:msgSC

    // 云函数入口文件 index.js
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      const wxContext = cloud.getWXContext()
      try {
        const result = await cloud.openapi.security.msgSecCheck({
          content: event.text
        })
        
        if (result && result.errCode.toString() === '87014'){
          return { code: 500, msg: '内容含有违法违规内容', data: result }
        }else{
          return { code: 200, msg: 'ok', data: result }
        }
      } catch (err) {
        // 错误处理
        if (err.errCode.toString() === '87014') {
          return { code: 500, msg: '内容含有违法违规内容', data: err } 
        }
        return { code: 502, msg: '调用security接口异常', data: err }
      }
    }

    4、新建config.json

    //config.json 这条注释请不要复制到代码中
    {
      "permissions": {
        "openapi": [
          "security.msgSecCheck"
        ]
      }
    }

    5、右键msgSC函数名=》上传并部署,不上传node-modules

    6、page中调用

      bindbt: function () {
        that = this;
        wx.cloud.init();
        wx.cloud.callFunction({
          name: 'msgSC',
          data: {
            text: "需要检测的内容"
          }
        }).then((res) => {
          if (res.result.code == "200") {
            //检测通过
    
          } else {
    
            //执行不通过
            wx.showToast({
              title: '包含敏感字哦。',
              icon: 'none',
              duration: 3000
            })
          }
        })
      }

    二、总结一下几个关键点

    1、prject.config.json配置文件

    2、config.json中的openapi的值

    3、try和catch一定要加入判断

    展开全文
  • 1、如何插入能自动播放图片的幻灯片? 使用swiper组件,再在index.js中定义图片地址 实现效果 实例代码: index.wxml: <view class="selection" style="border:0;">...swiper indicator-dots="true" autoplay=...

    1、如何插入能自动播放图片的幻灯片?
    使用swiper组件,再在index.js中定义图片地址

    实现效果
    在这里插入图片描述

    实例代码:

    index.wxml:
    <view class="selection" style="border:0;">
       <swiper indicator-dots="true"        autoplay="true" interval="3000" duration="1000">
          <block wx:for="{{imgUrls}}">
             <swiper-item>
                <image src="{{item}}" width="355" height="150"/>
             </swiper-item>
          </block>
        </swiper>
    </view>
    
    index.js:
    Page({
      data: {
        imgUrls:[
           'https://i.loli.net/2020/02/21/gtN1icMTrALFPfb.jpg',
           'https://i.loli.net/2020/02/21/42pTOevfVio1jWs.png',
           'https://i.loli.net/2020/02/21/9elxq8TuMvWtRgs.jpg'
        ],
      }
    })

    2、如何实现左边带有绿线,右边有小字的头部标题?
    将标题定为特定的view模块,并使用flex布局

    实现效果
    在这里插入图片描述
    实例代码:

    index.wxml:
    <view class="header">
       <text>精品推荐</text>
       <text class="text-all">全部精品</text>
    </view>
    
    index.wxss:
    .header{
      border-left-width: 2px;
      border-left-style: solid;
      border-left-color: limegreen;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;  padding-left: 30rpx;
      padding-right: 30rpx;
      margin-top: 30rpx;
      margin-bottom: 30rpx;
    }
    
    .text-all{
      color: limegreen;
      font-size: 10px;
    }

    3、如何实现四宫格布局的内容?
    先在内容板块中插入四个view模块,定义第一层样式为flex布局,方向默认按行排列,换行,第二层样式为高250rpx,宽45%,间距2px,水平方向居中对齐
    实现效果
    在这里插入图片描述
    实例代码:

    index.wxml:
    <view class="content">
       <view class="content-item">
       1
       </view>
       <view class="content-item">
       2
       </view>
      <view class="content-item">
       3
       </view>
      <view class="content-item">
       4
       </view>
    </view>
    
    index.wxss:
    .content{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .content-item{
      height: 250rpx;
      width: 45%;
      margin: 2px;
      background-color: goldenrod;
    }

    4、如何插入图片?
    用image在第二层view中插入图片,再将宽和高定义样式为100%

    实现效果
    在这里插入图片描述

    5、如何实现半透明渐变色白字标题?
    使用绝对布局,离底部0px,对content-item进行定位,字体颜色为白色,字体大小10px,背景用linear-gradient属性,使用flex布局,方向垂直,对齐方式底部开始

    实现效果
    在这里插入图片描述
    实例代码

    <view class="content-item-text">
         <text>这里是标题</text>
    </view>
    
    .content-item-text{
      position: absolute;
      bottom: 0px;  color: white;
      font-size: 10px;
      background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));
      height: 125rpx;
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-left: 5%;
      padding-right: 5%;
      padding-bottom: 3%;
    }

    6、如何实现横板展示的内容?
    先创建新的view模块,再在其中插入两个view模块,分别是标题、内容,再在内容模块中插入两个view模块,分别是图片、文字。
    标题样式同上。内容模块样式高500rpx,宽100%,图片模块高300rpx,宽100%,图片样式宽100%,高100%,头像样式为圆形,位置为绝对,离底部-50rpx,宽,高均为100rpx,距离右边50rpx,文字模块高200rpx,宽100%,距离顶部30rpx,padding为0 3%,小字样式为字体大小10px,颜色#999,距离顶部20rpx,标题样式为粗体

    实现效果:
    在这里插入图片描述
    实例代码

    <view class="selection">
       <view class="header">
          <text>热门评测</text>
          <text class="text-all">全部评测</text>
       </view>
       
       <view class="list-item" wx:for="{{listItems}}">
          <view class="list-item-images">
              <image src="../../images/img2.jpg" class="list-item-images-img"/>
              <image src="../../images/avatar.jpeg" class="avatar"/>
          </view>
          
          <view class="list-item-text">
             <view class="list-item-text-title">
                <text>标题标题标题标题</text>
             </view>
             
             <view class="list-item-text-content">
                <text>这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,</text>
             </view>
             
          </view>
       </view>
    </view>
    
    .list-item{
      height: 500rpx;
      width: 100%;
    }
    
    .list-item-images{
      height: 300rpx;
      width: 100%;
      position: relative;
    }
    
    .list-item-images-img{
      height: 100%;
      width: 100%;
    }
    
    .avatar{
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      position: absolute;
      bottom: -50rpx;
      right: 50rpx;
    }
    
    .list-item-text{
      height: 200rpx;
      width: 96%;
      margin-top: 30rpx;
      padding:0 3%;
    }
    
    .list-item-text-title{
      font-weight: bold;
    }
    
    .list-item-text-content{
      font-size: 10px;
      color: #999;
      margin-top: 20rpx;
    }

    7、如何分隔每个模块?
    设置selection的样式,底部边框,宽4px,实线,颜色为#ddd

    .selection{
      border-bottom: 4px solid #ddd;
    }
    展开全文
  • 原创:豪豪 前言 最近沉迷小程序开发,发现了一款功能、界面、体验俱佳的小程序“旅行小账本”。...但熟悉微信开发者工具的朋友们应该知道,它不支持Emmet缩写语法,并且wxml的属性值默认用单引号表示(强迫...
  • 一定要记录下的信息是小程序密钥这个千万不能丢 在微信开发者工具中需要使用这个密钥 下面是微信开发者工具中我选择的普通开发不是云开发 下面就说说页面 首先我们将页面划分为独立板块和公共部分: 公共部分...
  • 一、微信开发环境搭建  1、申请一个测试的公众号。  2、用来调式代码的开发环境。 1.1注册测试公众号(为什么要注册测试公众号:因为接口多,适合学习研究。) 测试公众号的注册地址为:...
  • 微信小程序个人心得

    2019-09-26 07:52:01
    昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. 1 2 3 app.js ...
  • 下载地址:windows 64、windows 32、mac本次更新修复信息如下:1、修复 1.02.1804080 引入的编译条件为分包内页面时无法加载的问题 1. 更新到最新版本后 ,编译模式中创建新的直接编译分包(/subpage/a)入口的页面...
  • 最近沉迷小程序开发,发现了一款功能、界面、体验俱佳的小程序“旅行小账本”。该小程序由腾讯旅游操刀...小程序开发必然少不了微信开发者工具,再加上其对云开发的全面支持,再好不过的开发利器。但熟悉微信开发...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何制作一个文本框,并改变其在页面所处位置?如何...
  • 下载微信开发者工具——去官网下载就好 ——环境准备 登录成功点击+号 注册账号 建议使用全新邮箱账号,未被微信小程序、公众号注册过的账号; 获取APPID 点击注册: ![在这里插入图片描述]...
  • StreetLight模板微信小程序使用 平台配置说明 1->首先创建产品 2->新建产品->选择StreetLight模型->立即使用 3->创建成功 4->选择在线调试->新增测试设备 5->我这里上传...
  • 「H5程序俱乐部」是一个专注微信小程序学习交流,相关外包/招聘需求信息发布的微信公众号 源代码下载地址: http://pan.baidu.com/s/1hsnxUgG项目截图 项目结构│ .gitattributes │ .gitignore │ app.js ...
  • 上个月初,微信公众平台正式开放了“小程序”的公测,随之引发的是几乎所有关注这一领域的码农们的一次集体高潮。就在微信小程序开放公测次日(11月4日),其百度搜索指数便达到了近2万的峰值。这也是自年初微信公开...
  • 我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家。 这是第一篇,从零开始学习微信小程序开发。主要是小程序的注册开发环境的搭建。 首先我们要在下列网址申请一个属于自己的微信小程序...
  • 做微信开发两年了,最近看到微信方面的文章阅读量关注量上升的比较快速,激发了我满满的动力啊,所以就滋生了一个想法,从头开始整理一下微信公众号开发,写一个简易的教程,带着大家实现一下微信开发者文档上面...
  • 微信公众号

    2018-11-02 15:35:17
    微信公众号 微信公众号是开发者或商家在微信公众平台上申请的应用账号,该帐号与QQ账号互通,通过公众号,商家可在微信平台上实现特定群体的文字、图片、语音的全方位沟通、互动 。微信公众号分为订阅号服务号及...
  • 一、微信公众号平台 微信公众平台,即我们平时所说的“公众号”,曾用名“官方平台”、“媒体平台”,但最终命名为“公众平台”。从微信的命名我可以发现,公众平台不只是官方、媒体使用的平台,而是对所有公众都...
1 2 3 4 5 ... 20
收藏数 698
精华内容 279
关键字:

微信开发者工具怎么弄板块和分类