微信小程序开发记录干货共享

摘要:微信小程序开发过程中通过通过 console.log(e) 可以打印任何东西，相当于开发日志，会记录开发过程的一些相关信息。微信小程序开发过程中通过通过 console.log(e) 可以打印任何东西，相当于开发日志，会记录开发过程的一些相关信息。

代码运行 文档 说会自动保存，但通过实际测试，修改代码后需要手动保存，而且没有全部文件保存，修改一个文件保存一个，command + r 不能更新，command + s 就会保存并编译运行 查看代码是否已保存 没保存最新就有个小绿点 没保存就有个小绿点 新建项目 必须要有index文件，不然总是提示报错。

找不到路径 文件格式 文档 js 文件中Page必须是首字段，不能修改，数据都放data里面，自定义事件同级 //获取应用实例varapp = getApp()Page({// 数据data: { motto:\'MiHome_Store\'},//事件处理函数bindViewTap:function(){ wx.navigateTo({ url:\'../logs/logs\'}) }}) wxml 文件是 数据界面展示 ，跟HTML 一样，只是标签不一样了，可参考官方文档 wxss 文件是 界面样式修改，更CSS 差不多，听说暂时不能完美兼容CSS3 json 文件是 基本配置，如果是在app.json 中写的就是全局配置；如果在对应页面中写就指定页面的配置，但是pages只能写在app.json 中。

注意：必须在pages设置项目中的文件路径，才能正常使用文件，pages 第一个配置的路径就会首先显示的界面 图片格式支持 不支持jpeg 格式，支持png、支持j\'p 创建tabBar 在app.json 中设置,此时显示的路径必须是已经在pages 中配置好。

tabBar: {
    list: [
      {
        pagePath: pages/index/index,
        text: 框架,
        iconPath: image/微信.png,
        selectedIconPath: image/微信HL.png
      },
      {
        pagePath: pages/component/component,
        text: 组件,
        iconPath: image/微信.png,
        selectedIconPath: image/微信HL.png
      },
      {
        pagePath: pages/api/api,
        text: API,
        iconPath: image/微信.png,
        selectedIconPath: image/微信HL.png
      },
      {
        pagePath: pages/tool/tool,
        text: 工具,
        iconPath: image/微信.png,
        selectedIconPath: image/微信HL.png
      }
    ]
  }

页面中设置窗口配置信息 app.json中需要添加window标签，子页面json不需要添加window标签,直接在{}内设置：

window: {
  navigationBarBackgroundColor: #ffffff,
  navigationBarTextStyle: black,
  navigationBarTitleText: 小程序,
  backgroundColor: #eeeeee,
  backgroundTextStyle: light,
  enablePullDownRefresh: false
  }{
    backgroundTextStyle:light,
    navigationBarBackgroundColor: #fff,
    navigationBarTitleText: gitkong,
    navigationBarTextStyle:black
}

项目文件快速创建 直接在app.json 的 pages 中设置路径就可以，比如你想在pages文件夹中创建image文件夹，image文件夹中创建四个文件，image.js、image.json、image.wxml、image.wxss ，只需要添加路径
快速创建
文件 数据读取 单个字段属性，通过 {{xxx}} autoplay={{autoplay}} 其中 autoplay 是 js 里面的data json 中的字段数组遍历，通过 wx:for或者类似iOS 的 banner_list[0]单个获取（默认下标变量是index，对应当前项变量是item） wx:for-items={{banner_list[0].banner}}
可以使用block 标签 配合，item 就是遍历后的某一个，通过点语法继续向下获取。

参照文档：列表渲染、数据更新改变js 中的 data 数据 ， 通过this.setData 修改;this 是当前页面的一个实例对象，当然如果是嵌套方法里面就要注意使用this，此时this就代表内部嵌套的方法 // name 是 data 中的一个字段属性，通过点击方法changeName 修改：
changeName:function(){
  this.setData({
    name : \'gitkong\'
  })
}

传值 一般页面中不需要传形参值（表单也不需要），默认是把当前的控件传进去，在方法中可以获取实参e（名字随你写），HTML 中可以通过document获取当前的控件对象，但小程序这边废弃了，虽然方法还存在，但调用是一点效果都没有的 changeName: function(e){ this.change(e) } 此时获取到的e 就是 当前的控件对象，用 console.log(e) 打印。
当然，如果你在js 需要 获取到 wxml（界面） 中 传递的值，利用 id 或者 data-你喜欢的变量名 给个view绑定 个值，然后在实参获取到了，当然你喜欢传多少个都可以，名字不一样就行。

注意：不管你外部命名的变量名是否含有大写字母，dataset内部获取到的字段key 都全部转成小写，获取的时候注意，例如id={{detailFrameItem.detailName}} data-index={{detailIndex}} ，此时注意：里面dataset 里面的字段都是小写，不管你在外面怎么写；比如此时我传入 data-detailIndex（驼峰命名法），此时dataset 对应的字段是 detailindex ##WXML  {{name}}   ##js 。

changeName: function(e){
    console.log(e)
    console.log(e.target.dataset.src)
  }
绑定形参一般是在js 文件中传递，通过 this.方法名(形参) 调用并传参
change:function(e){
    // 此时打印的就是 hello
    console.log(e)
  },

  changeName: function(e){
    this.change(\'hello\')
    console.log(e.target.dataset.src)
  },页面跳转

通过 wx.navigateTo 方法跳转,同级目录就只有一个 ../ 上层有多少个就添加多少个../
wx.navigateTo({
      url: \'../question/question\'
    })
通过 navigator 标签，在 WXML 中创建并传入跳转的url 换行是不行的，要用 \ setData 里面不能处理任何逻辑，只能是赋值 this.setData({
      xx  : \'\'
    })
error JS 的 forin 是遍历出角标，并不能直接获取数组元素 for(variteminitems){ console.log(items[item].name) } 小程序使用let 接收变量，然后修改了，编译通过，运行还不报错；所以推荐都是用var 来接收吧，防止手残，找问题找死你 js 里面的点语法 编写代码的时候，js 文件中，你可以点任何东西，他不报错也不提示 注释问题 都可以通过快捷键 command + / 注释 注意：app.json 里面不能添加注释，编译不过 断点问题 如果你打了断点，没取消，然后去编辑代码，当你编译触发断点后，界面不会跳到调试界面，所以要注意自己的断点喔 wxss 文件中代码不提示 在wxss 文件中，如果首次布局对应的 class选择器或者id 选择器，不会提示，但第二次就会提示了，类似于xcode 8 的一个bug，导入文件的时候，首次不会提示。

本文地址：https://www.webbj.cn/operation/xcx1878.html