小程序开发

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

编辑时间:2019-08-24 15:10  浏览次数:浏览次数
摘要:微信小程序开发过程中通过通过 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/opertion/xcx1878.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
010-69759765186-1139-1767