微信小程序开发须知

说好的一个月更新一次又搞忘了，主要是一直都闲着也不知道要写什么。以下的是在做微信小程序中卡壳的地方，虽然做过几个小程序项目但是在一段时间没接触之后再重新去做时虽然知道原理或者概念但是还是需要重新去百度或者查看api才知道。刚好今天有时间就总结下小程序开发的问题方便自己之后随时查看避免长时间没接触后每次都需要去查看资料。

第一步

在开发小程序时你首先需要到微信开发者平台去注册个小程序账号才能继续,按照开发的注册流程填写信息就可以。

第二步

下载微信开发者工具并创建项目
创建完项目我们就可以随心所欲的写我们的代码啦……
下面这些都是在我开发的过程中遇到的问题或者不熟练的地方，今天有时间就给总结了下方面自己下去查看

小程序用法

• if，else 条件判断

<view wx:if="{{isHidden}}">哈哈</view>
<view wx:elif="{{data==3}}">数据展示</view>
<view wx:else>第三种情况</view>

• for 列表渲染

<view wx:for="{{list}}" wx:key="{{item.id}}">{{index}},{{item}}
<view wx:for="{{item.info}}" wx:key="{{items.id}}" wx:for-item="{{items}}"></view>
</view>

wx:for 是必须要设置的否则微信会报警告，而且设置了key更能高效的提高渲染的效率

• 小程序在提交数据给后台时有两种方法，formdata和string需要设置header

//第一种（小程序默认）
header:{
	'content-type' : 'application/json'
}
//第二种
header:{
	'content-type' : 'application/x-www-form-urlencoded'
}

• 上拉刷新下拉加载更多

//json文件
"enablePullDownRefresh" : true
//js文件
/*监听用户下拉动作*/
onPullDownRefresh:function(){}
/*页面上拉触底事件的处理函数*/
onReachBottom: function () {}

onPullSownRefresh中触发下拉刷新时将所有的数据做初始化处理 this.setData({currentPage:1})等，并且重新调用页面初始化时间this.init()

onReachBottom中触底触发的函数主要是判断currentPage是否大于allPage，如果没有的话就currentPage++再去调用后台的list数据，否则的话就return出来并且提示用户数据已经加载完毕

小程序开发中的问题

1、有时候我们会遇到返回上一页并要求刷新页面的需求

解决方法分两种情况：如果你的页面的初始化是在onload中写的那就比较复杂需要在有返回按钮的页面设置前一个changeData方法然后在list页面的这个函数中调用this.load()这个可以具体去网上搜索解决方法有很多。我主要是推荐第二种方法就是在你onshow中去初始化页面，这样你在切换页面时就会刷新啦

2、还有我们可能在第二个页面操作第一个页面的数据

页面A（list）页面跳转到B页面查询只有再返回A页面。使用 getCurrent() 设置前一个页面的setData

3、小程序中输入内容后可以在软键盘中触发函数

//input的confirm-type可设置软键盘又下角按钮文字（仅type="text"时有效）
1、完成（默认）
confirm-type="done"
2、开始
confirm-type = "go"
3、搜索
confirm-type = "search"
4、发送
confirm-type = "send"
5、下一步
confirm-type = "next"

4、小程序中使用echarts问题
问题描述：第一次进入页面的时候echarts能正常显示，点击左上角的返回按钮后再进入echarts显示为空白但是里面的series数据正常，echarts也不报错

解决：因为有选择日期这种需要切换echarts所以我首先var Char = null 然后去判断第第一次加载还是之后的条件选择（日期）筛选来动态的设置options，而我在点击返回后再去进入之后他直接跳转到了条件选择设置的这个options，我猜测应该每次进入页面的时候都进行第一次加载的步骤所以我在onload中重新赋值了Char = null就成功解决了这个问题，嘻嘻嘻

这是我的代码仅供参考：

//首先需要引入echarts插件
import * as echarts from '../../components/ec-canvas/echarts'
var Chart = null
Page({
	onLoad:function(){
	Chart = null//这里必须重新设置下Chart=null才能避免上面问题的出现
	},
	//初始化图表
  init_echarts: function() {
    console.log('初始化图表')
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      this.setOption(Chart);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  //设置options
  setOption: function(Chart) {
    Chart.clear(); // 清除
    // 指定图表的配置项和数据
    app.post('url', {}, true).then(res => {
      let rejectArr = [] 
      let adoptArr = []
      let dataTime = []
    /* ……省略数据处理部分*/
      let option = {
        color: ['#F5222D', '#3A8DFF'],
        legend:{
          data:['审核通过','审核未通过']
        },
        xAxis: {
          type: 'category',
          data: dataTime,
          axisLabel: {
            rotate: -30,
            textStyle: {
              fontSize: 14
            }
          }

        },
        yAxis: {
          type: 'value',
          axisLabel:{
            textStyle:{
              fontSize:14
            }
          }
        },
        series: [{
          name:'审核未通过',
            data: rejectArr,
            type: 'line',
            smooth: true
          },
          {
            name:'审核通过',
            data: adoptArr,
            type: 'line',
            smooth: true
          }
        ]
      }
      Chart.setOption(option)
    }).catch(errmsg => {
      console.log(errmsg)
    })

  }
})

5、view and image之间有缝隙
解决方法：设置image为block，原理和img的一样

6、小程序自定义组件传的值为array类型时的写法

<c-process value="{{[1,2,3]}}"></c-process>

总结：以上就是我在开发小程序时遇到的一些问题以及小程序的一些基本用法的一些笔记,啦啦啦啦啦