微信小程序|微信小程序页面渲染新手入门总结微信小程序页面渲染新手入门

新手入门，大神勿喷。。。。
渲染小程序的前端页面入门步骤（非云开发项目）
1.进入官网注册appId并且下载微信开发者工具

文章图片

2.进入开发者工具后点击app.json文件，在pages字段下新建页面（此处新建页面会自动生成所需的四种文件，比较方便）

文章图片

文章图片

3.在Wechat Development Code目录下新建一个文件夹存放静态资源（图标、图片等）
4.新建的页面会有四个文件：一、.wxml文件:用标签语言渲染页面结构二、 .wxss文件：设置页面组件的样式三、.js文件:管理页面和数据的逻辑四、 .json文件: 设置页面的标题栏等等
5.wxml相当于web端的html，wxss相当于css，
入门过程中得一些小汇总。。。。
1.小方法的资源汇总：

页面跳转详细说明：https://blog.csdn.net/u010635353/article/details/54018118
使用wx.navigateTo传递参数的方法：https://www.jb51.net/article/124573.htm
文字排版以及布局：https://blog.csdn.net/qq_34281962/article/details/52729215
上传图片音频视频的简单方法：https://www.jb51.net/article/97957.htm
display: -webkit-box; 的简单用法：https://blog.csdn.net/x1198928367/article/details/52624181
自定义弹窗的方法：https://www.cnblogs.com/liululin/p/6001437.html

2.注意事项

导航栏tabBar的list第一项必须是page配置第一项。
空格换行（ \n）等转义符在view里是没有效果的，需要在text中设置decode="{{true}}"之后才可生效，而且必须在text中。
picker-view里可以调用bindchange事件的e.detail.value取得一个数组，数组第一项为选项的值在data的数组里的位置。
app.json里定义的导航条只在tabBar页面中会显示。
在使用wx.chooseImage这个API时，要在api外面进行var that=this 的转换，在wx.chooseImage()里面使用this，会报Cannot read property 'setData' of null 的error，而且res.tempFilePaths取得的是一个数组。
本地图片做背景时，可以用标签和position:absolute; +z-index:-1; 让图片置于底层，然后铺满（静态前端的蠢蛋做法哈哈）
用navigaTo跳转页面并用navigateback返回时，上一页面的状态不会自动刷新，可行的方法是在后一页面返回时执行上一页面的onload方法。。。
wx.redirectTo和wx.switchTab都会先清除页面栈后跳转，所以跳转后的页面没有系统自带的返回键，而且跳转到tabBar页面只能用wx.switchTab
tabBar页面的对象可以存到全局数据里，如果点击系统自带的返回按钮无法刷新页面时可以调用对应页面的对象的onLoad方法。
wx.navigateTo无法打开页面一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo