小程序开发坑纪要

技能储备

• html css javascript

我们需要做哪些准备(官方文档）

• download&&install 开发者工具
• 启动
• 扫码登录
  • 注册账户
  • 得到一个appID
• 创建一个小程序

疑问

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
• 如何替换navigation bar的颜色
  • 在app.json中修改

"window": {
    "navigationBarBackgroundColor": "#2187e5",
  },

调整前
调整后[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rrtYQd08-1575453503444)(http://yx-kbs-ks3.haofenshu.com/images/b4c05430f6ce11e9bd0aa5bcde3d53d0.png)]

• 发送请求
  • 开发者工具设置不校验合法域名、手机需要打开调试
  • 上线的话需要在后台配置当前小程序的域名为允许访问的合法域名（如有转发，转发后的域名也需要是后台配置的允许访问的合法域名）

//微信上是这样发送请求的
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    //TODO...
    console.log(res.data)
  }
})

数据的渲染

为dom绑定事件

//在wxml文件中
<view wx:for="{{qualityTab}}" wx:if="{{item.value}}"
    wx:key="{{index}}" data-curtab="{{index}}" bindtap="handleTab">{{item.name}}
    <view class="item-count">
        {{ item.value}}
    </view>
</view>

//在js文件中
handleTab(e) {
  let index = e.currentTarget.dataset.curtab;
  if (this.data.qualityTab.length === 4 && index === 2) {
    this.setData({
      left: 90
    });
  }
  this.setData({
    curQuality: index,
    questionList: tempQuestionQuality[index].list
  });
},

以上代码用到了循环wx:for,条件判断wx:if,事件绑定bindtap,以及传参data-curtab,拿值this.data以及赋值this.setData

hover

<view class="tr" hover-class="td-name" hover-start-time="{{0}}" hover-stay-time="{{0}}"  wx:for="{{questionIndexCol}}"  wx:key="{{item.name}}">
    <view class="td one-txt-cut">{{item.name}}</view>
    <view class="td-position" wx:if="{{item.name.length > 15}}">{{item.name}}</view>
</view>

遇到过的问题

• 1 后端返回的数据放到前端渲染时期望换行
  • a. 使用<pre>标签,pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符
  • b. 用css样式解决，style="white-space:pre-line;"
  • c. 使用富文本标签,其属性nodes支持有换行标签

 <rich-text nodes="{{detail.moduleInfluence}}"></rich-text>

• 2 小程序审核时被打回可能会是什么原因？
  • 删除掉小程序中的秘钥
  • 审核时要提交测试账号和密码
• 3 echarts图总是盖住页面组件？
  • 比如弹出框，要想弹出框凌驾于echarts图之上，弹出框相关的部分要使用组件，包括子节点
• 4 设置小程序不被索引到
  • 微信小程序后台–（左侧导航）设置–基本设置–隐私设置（允许被搜索）–关闭
  • 配置sitemap

坑：小程序中引入echarts会引发的问题

• 图表若是可以滑动，会偶现滑着滑着图表消失的情况
• 与图表交互，比如折线图期望点击图表会有tooltip提示，但是会出现点几下后就不再提示的情况（必现）
• 小程序的全局样式app.wxss作用不到组件里面

关于.wxs文件

• 这个文件里面不能使用箭头函数、解构赋值等 es6特性方法
• 方法传值若涉及异步传参会报错。需要判断一下参数是否存在