微信小程序 开发填坑
1，json文件里不能使用备注，否则编辑会报错
2.如果图片未指定高宽，小程序会有一个默认的值。image组件默认宽度300px、高度225px
3.只有使用text组件包裹的文字，才能在手机端长按选中
4.缓存数据大小不能超过10M
5.对swiper-item设置高宽是不起作用的，必须设置在它的父容器上swiper才可以。swiper-item自动继承父容器的宽高的100%
6.在程序的app.json里，是可以对page,window…进行配置，但是在具体分页面的json里是只能对window进行配置的。所以不需要在套一层windowl了
7.在属性中如果要绑定flase的布尔值，需要用双花括号包裹，否则会认为为true
{{title}}
8.，在小程序里，如果要使用另一个js里的数据，需要在在另一个js里exports 一下
var local_database = [{date: 'sep 18 2016',},
]
module.exports = {postList: local_database
}
注意：这里一定要使用相对路径
// pages/posts/posts.js
var postData=require('../../data/posts-data.js')
9.获取url参数
wx.navigateTo({url: '../posts/post-detail/post-detail?id=' + postId});
Page({data: {},onLoad: function onLoad(option) {var postId = option.id;this.data.currentPostId = postId;var postData = postsData.postList[postId]; //this.setData({postData: postsData.postList[postId]});},
})
10.数据赋值
如果是同步数据赋值。可以直接使用this.data=xxx;
onLoad:function(option){var postId = option.id;this.data.currentPostId=postId;})
异步数据:this.setData
onLoad:function(option){var postId = option.id;this.data.currentPostId=postId;this.setData({postData:postsData.postList[postId]});})同步数据也可使用this.setData,但是尽量使用this.data，因为如果是使用this.setData。有可能onLoad（页面初始化）已经结束，但是this.setData还没执行完毕。
11.全局变量的使用
有些数据被不同的页面所使用，但是如果使用缓存会存在一定的问题。因为即使用户退出，缓存依然会被保存下来。所以，这就需要用到全局变量。
在app.js:
App({globalData:{ g_isPlayingMusic:false,g_currentMusicPostId:null,doubanBase: "https://api.douban.com",}
})
具体页面js:
var app = getApp();//先获取对象
console.log(app.globalData.g_isPlayingMusic);//使用
app.globalData.g_isPlayingMusic =true;//修改
12.设置置顶栏文字内容
wx.setNavigationBarTitle({text: 'hello, world!'
})
如果把这句代码直接写到页面onLoad方法里，会不起作用。
原因：因为onLoad生命周期内，无法操作页面UI,
解决：放在oneady方法中
// a/a.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {wx.setNavigationBarTitle({text: 'hello, world!'})},})
13.上拉加载scroll-view，一定要指定高度，这样才会触发bindscrolltolower方法
.grid-container{height: 1300rpx;margin:40rpx 0 40rpx 6rpx;
}
一、小程序开发者工具注意事项:
在工具里调试，在【sm】文件里调试
如果小程序开发着工具中出现点击一次重复调取两次接口，如果代码没有问题，建议先清除小程序缓存，关闭开发者工具，重新打开。
小程序开发者工具格式化代码：alt+shift+f
开发者工具里最顶部，有一个普通模式下拉框，支持添加编译模式，可以配置想调试的页面，比如page/list/list。
二、小程序全局配置事项：
程序的入口文件名字必须叫做“app.js app.json app.wxss”
页面的wxml受与他同名的wxss文件样式控制
思考：小程序中并没有像html中那样的“link”标签，wxss文件没有引入到wxml中，为什么样式还起作用？
答案：因为在app.json中，注册页面的时候（pages）,它其实注册的不只是一个wxml文件，而是所有以这个名字的文件包括wxml. Wxss json js，把他们自动关联在一起。
缓存最大10M。请注意。
三、小程序json文件注意事项：
json文件里不能加备注，否则会报错。
页面的json文件不能为空，可以只写一个空对象，否则会会报 “文件解析错误 SyntaxError: Unexpected end of JSON input”
app.json里面的pages数组的第一个，代表着小程序的首页。
json中的backgroundColor这里指的窗口背景色是指下拉时显示的窗口背景色，需要 “enablePullDownRefresh”:true 时才起作用 。
四、小程序wxss文件注意事项：
样式就近原则，如果一个样式，在app.wxss文件里定义了，在单独的页面里也定义了，那么当前页样式会覆盖app.wxss中的样式。
所有的页面的wxss文件都会继承app.wxss文件。所以一些公共样式可以放在app.wxss文件中。
对page设置样式等价于对整个可视区域设置样式.。如：page { background-color } 那么整个可视窗口都是红色。
小程序开发者工具中不支持less/sass。可以结合框架wepy或者webstorm使用这些预编译
不是所有的单位都是用rpx，例如：字体，我们要确保在不同的机型下，文字的大小一致。
微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片。
如何在小程序里让字体变细。可以在app.wxss中定义
page:{
font-family: “PingFangSC-Thin”;//因为苹方字体是ios内置的字体，所以在安卓机下无效。可以考虑引入第三方字体，但是要考虑到有点字体包体积会很大。
}
对自定义组件添加样式，需要具体到组件内部的具体的标签（准确来说应该是小程序内置组件）。
例如：在页面中我们对一个组件设置背景，
.content > v-tag {background:red;}。这样写会不起作用，因为v-tag里面会有好多小程序内置的组件如view，text等，小程序无法区分到底给哪个内置组件添加样式，
因此，需要具体到自定义组件中的某个内置组件:
.content > v-tag >view {background:red;}
小程序涉及边框问题，比如border，如果宽度是偶数，真机通过小程序本身的适配计算会缺少1px，导致边框丢失。所以建议这种情况，宽度采用奇数。
五、小程序js文件注意事项：
在页面的js中，引入其他js或者工具类的时候，不能使用绝对路径，必须使用相对路径。
数据赋值尽量都使用this.setData，避免视图不改变。
注意js中的空格。如：redirectTo（{
url: ’ /pages/home/home’,
})。如果在路径的前面多打一个空格，会把整个路径追加到当前页面的路径后面。
在小程序中，跳转使用绝对，相对路径都可。
小程序做转发分享到好友或群，并自定义title，path，imageUrl：
两种方式：
1）js里写入下面这个方法
onShareAppMessage: function () {
return {
title: ‘生成图片’,
path: ‘/pages/index/index’, // 路径，传递参数到指定页面。
imageUrl:"",
success:function(){}
}
},
2）通过button方式，open-type=“share”,在js页面写入上面 1）方法，就会调用转发接口。
分享//plain：设置透明
小程序识别二维码，在app.js的onlaunch方法里 需要通过options.query.scene 去获取，而普通js onload 需要 通过options.scene去获取
js页面需要重载的方法要写到onShow里面
六、小程序wxml文件注意事项：
数据绑定时，如果绑定的位置在标签的属性位置时，那就要使用双引号把双花括号包裹一下，如果是在标签里面，则不需要使用双引号。
使用数据绑定时，双花括号和双引号之间不能有空格，否则会把双引号之间的内容解析成字符串。
对swiper-item设置高宽是不起作用的，应该把样式设置到swiper上。
text组件包裹的文本，才能在手机里长按选中，text组件可以嵌套text,。text组件里可以使用转义字符，例如\n会被转移译成换行
image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。
小程序的view组件类似与html中的div，容器的作用。
七、小程序小技巧：
遇到列表跳转详情页，可以把数据以data-* 的形式保存到标签内部，通过 e.currentTarget.dataset方式获取，dataset是一个对象，保存的是标签内部 所有data-* 属性
小程序内部跳转url，要配合webview方式。如：轮播图跳转到相应链接，需要新建一个webview容器。
页面内部用src属性盛放url链接，才能在小程序内部打开第三方http或https链接形式（链接必须带上http或https）。
八、小程序上线注意事项：
1. 上线域名必须是https协议和wss协议，必须经过 ICP 备案，需要在微信公众平台配置。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！