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

摘要:微信小程序开发过程中通过通过 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/wechat.png,
selectedIconPath: image/wechatHL.png
},
{
pagePath: pages/component/component,
text: 组件,
iconPath: image/wechat.png,
selectedIconPath: image/wechatHL.png
},
{
pagePath: pages/api/api,
text: API,
iconPath: image/wechat.png,
selectedIconPath: image/wechatHL.png
},
{
pagePath: pages/tool/tool,
text: 工具,
iconPath: image/wechat.png,
selectedIconPath: image/wechatHL.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

##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