公众号和小程序踩坑记录

公众号开发的步骤

1.绑定域名： 在公众号设置中设置 JS接口安全域名，会生成一个txt的文件，要下载下来。上传至填写域名或路径指向的web服务器的目录，并确保可以访问。

2.引入JS文件

• 直接引入http://res.wx.qq.com/open/js/jweixin-1.4.0.js 文件。
• 也可以支持AMD/CMD标准模块加载方式加载 npm

3.通过config接口注入权限验证配置

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名
        jsApiList: [] // 必填，需要使用的JS接口列表
    });

• 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用，同一个url仅需调用一次。

• signature 这个签名很重要，是服务端生成的。

• nonceStr 不能是空的，还必须是字符串 不能是数字。

• jsApiList 这个就是微信API的接口列表，需要调用的接口就要列举出来。

  • 注(重要): 在SPA应用中，在Android下直接使用 window.location.href 得出的URL进行签名是完全没问题，但是是在ios上是无效的， 这是因为在IOS上，无论路由切换到哪个页面，实际真正有效的的签名URL是【第一次进入应用时的URL】。

    解决问题的方法： 利用缓存，ios中将第一次进入应用的页面，缓存起来。这样在ios中只要生成一次签名就可以了， Android直接拿每个页面的URL就可以了。

    encodeURIComponent,

    不能使用window.open()

• wx.ready(function(){});

  注:config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

  自定义“分享给朋友”及“分享到QQ”按钮的分享内容

  wx.updateAppMessageShareData({ 
      title: '', // 分享标题
      desc: '', // 分享描述
      link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '', // 分享图标
      success: function () {
      // 设置成功
      }
  })；
  
  

  分享图标: 这里有个小坑，不能写相对路径，写相对路径，有兼容性问题，iOS 和android 不一样 要用完整的路径。还有就是必须填写。 1.4版本的函数有点问题，分享后没有回调。1.2版本的有

小程序

[链接地址:developers.weixin.qq.com/miniprogram…]

小程序项目结构介绍

• 全局的的文件
  • app.js、app.json、app.wxss、(project.config.js,sitemap.json) 这三个是必不可少的,其中 .js 后缀的是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
  • app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。

    //app.js
    App({
        onLaunch: function () {
            // 调用 API 从本地缓存中获取数据
            var logs = wx.getStorageSync('logs') || []
            logs.unshift(Date.now())
            wx.setStorageSync('logs', logs)
        },
        getUserInfo:function(cb){
            var that = this;
            if(this.globalData.userInfo){
            typeof cb == "function" && cb(this.globalData.userInfo)
            }else{
            // 调用登录接口
            wx.login({
                success: function () {
                wx.getUserInfo({
                    success: function (res) {
                    that.globalData.userInfo = res.userInfo;
                    typeof cb == "function" && cb(that.globalData.userInfo)
                    }
                })
                }
            });
            }
        },
        globalData:{ // 全局的数据
            userInfo:null
        }
    })
    
  

  • app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。

        {
            "pages":[
                "pages/index/index",
                "pages/logs/logs"
            ],
            "window":{
                "backgroundTextStyle":"light",
                "navigationBarBackgroundColor": "#fff",
                "navigationBarTitleText": "WeChat",
                "navigationBarTextStyle":"black"
            }
        }
    

  • app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

   /**app.wxss**/
   .container {
       height: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
       padding: 200rpx 0;
       box-sizing: border-box;
   }
  

  如在 iPhone6 上，屏幕宽度为375px，所以 1rpx = 1px;
• 创建页面
  • 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件，.wxml 后缀的文件是页面结构文件。
  • index.wxml 是页面的结构文件：

      <!--index.wxml-->
      <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
          <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
          <text class="user-motto">{{motto}}</text>
      </view>
      </view>
  
  

  • index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

      //index.js
      // 获取应用实例
      var app = getApp();  获得app的实例 
      Page({
          data: {
              motto: 'Hello World',
              userInfo: {}
          },
          // 事件处理函数
          bindViewTap: function() {
              wx.navigateTo({
              url: '../logs/logs'
              })
          },
          onLoad: function () {
              console.log('onLoad')
              var that = this
              // 调用应用实例的方法获取全局数据
              app.getUserInfo(function(userInfo){
              // 更新数据
              that.setData({
                  userInfo:userInfo
              })
              })
          }
      })
  
  

  • index.wxss 是页面的样式表：

      /**index.wxss**/
      .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      }
  
      .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
      }
  
      .userinfo-nickname {
      color: #aaa;
      }
  
      .usermotto {
      margin-top: 200px;
      }
  

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

• index.json 是页面的配置文件：

页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

    {
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
    }

微信小程序 less 支持

小程序中的.wxss文件和css基本一致，主要差异在基本单位的使用上，css中的px对应到wxss是rpx。 less的好处很多，将less编译为wxss只需吧less中的px转换为rpx，将文件后缀名改为wxss即可。

• 使用webstorm
  • 添加 less watcher
  • 添加less后存在rpx单位转换的问题，想办法将px单位转换为rpx单位(出了1px)，添加另外一个watcher，用sed命令来进行替换
    • Program 填 sed
    • Arguments -i ".bak" -e "s/px/rpx/g" -e "s/1rpx/1px/g" ,在vim中的正则%s/\(\d\d\|[2-9]\)px/\1rpx/g,sed中模仿的正则s/\([[:digit:]][[:digit:]]\|[2-9]\)px/\1rpx/g（没起作用）
• 使用gulp + less

const gulp = require("gulp")
const less = require('gulp-less');
const replace = require('gulp-just-replace');
const rename = require('gulp-rename');

gulp.task('buildLess', function () {
    return gulp.src('pages/**/*.less')
        .pipe(less()) // 编译less
        .pipe(replace(/(\d\d|[^\d][3-9])px/g,'$1rpx')) // 替换rpx
        .pipe(rename( function (path) {
                path.extname = ".wxss";
            } )) // 生成wxss文件
        .pipe(gulp.dest(function (file) {
            console.log(file.base)
            return file.base;
        })); //输出到原来less文件相同的目录下
});
gulp.task('watchLess',function () {
    gulp.watch('pages/**/*.less', gulp.series('buildLess')); //当所有less文件发生改变时，调用Less任务
})
gulp.task('less',gulp.series('buildLess','watchLess'));

推荐使用gulp方案

编辑器的方案是通过添加两个file watcher来实现的，其中lesswatcher会自动触发，sed命令的watcher需要激活.wxss文件才会触发，使用起来不方便，使用less可以一步到位并且脱离编辑器的束缚。

自定义组件

• json文件中(自定义组件)

// .json
{
"component": true
}

• wxml,wxss和普通页面基本类似
• 注意： 在组件wxss中不使用ID选择器，使用属性选择器和标签名选择器。
• 使用Component方法来注册组件

// js
Component({
  // props
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

    <!-- 组件模板 -->
    <view class="wrapper">
    <view>这里是组件的内部节点</view>
    <slot></slot> // children
    </view>

在需要使用自定义组件的page，在page的json文件中

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

• 在页面中的使用

<!-- 引用组件的页面模板 -->
 <component-tag-name>
    <View>
        我是内容
    </View>
 </component-tag-name>

• 注意的细节

  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

编辑器设置

小程序开始可以使用官方的开发编辑器，功能有点弱。 通过webstorm 配置来完成小程序开发 1.添加 *.wxml支持 Preference -> Editor -> File Types 找到html文件添加 *.wxml 2.同样添加 *.wxss支持 Preference -> Editor -> File Types 找到css文件添加 *.wxss 3.添加微信小程序代码提示，WebStorm下配置微信小程序代码提醒jar 4,开发过程中同时打开webstorm和官方编辑器就可以了