微信小程序日记（一）

安装好开发环境之后打开ide

输入appid、项目名、目录，由于目前没有申请appid所有选择无appid，创建完成！

注意下面的那个quick start，如果不勾的话会给你一个空白的项目，什么都要自己写，如果勾上的话会自动生成如下文件：

大概是4类文件，js、wxml、wxss、json。

js：脚本文件；wxml：页面结构文件；wxss：样式文件；json：配置文件。具体说明可以查看https://mp.weixin.qq.com/debug/wxadoc/dev/。

然后因为我们准备做个查询，那自然需要一个输入框，所以简单的加了一个form表单（请勿吐槽样式，毕竟不擅长这玩意而已只是顺手做的练习作品），代码如下：

<form bindsubmit="formSubmit">
    <view class="formview" style="height: 45px;">
      <view class="formview_title">{{title}}</view>
      <input class="search" name="search" placeholder="请输入要查询的产品" />
    </view>
    <view class="form_button">
      <button type="primary" formType="submit">查询</button>
    </view>
  </form>

界面如下：

然后自然是要提交查询，分为两个问题，一个是form表单提交，一个是页面跳转。

form表单提交：

在form表单可以绑定2个按钮，一个是提交，一个是重置

<form bindsubmit="formSubmit" bindreset="formReset">

    <button formType="submit">Submit</button>

    <button formType="reset">Reset</button>

</form>

然后在.js文件的page中绑定这2个方法

  formSubmit: function(e){

    console.log('form发生了submit事件，携带数据为：', e.detail.value)

  },

  formReset: function(){

    console.log('form发生了reset事件')

  }

在formSubmit中的具体取值的话可以用e.detail.value.xxx来获取，比如我上面的search的值就可以用e.detail.value来获取。

然后对search做了一个简单的是否为空判断，如果为空则弹出提示：

    if(search == ''){
      wx.showToast({
        title: '请输入要查询的内容'
      });
    }

关于wx.showToast,具体可参考https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject，可以理解成我们常用的alert。

接下来就是跳转，因为要携带参数，所以可以选择wx.navigateTo或者wx.redirectTo，官方解释区别是navigateTo保留当前页，可以用wx.navigateBack返回上一页；redirectTo会关闭当前页。我这里选择的是wx.navigateTo。具体官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject

这里遇到一个问题就是官方给的例子是这样的：

wx.navigateTo({
  url: 'test?id=1'
})

但是我使用'pages/productList/productList'的时候会报错：navigateTo:fail url not in app.json
使用'/pages/productList/productList'或者'../productList/productList'的时候可以正常跳转。

这一波大概就是这样，对了，关于传参的话也很简单，就跟get请求一样在url后面接上?xxx=xxx&xxx就可以了，这样的话就剩下在列表页面获取参数跟查询了，敬请期待