小程序知识点总结
微信小程序项目结构主要有四个文件类型
WXML 框架设计的一套标签语言 可以构建出页面的结构。内部主要是微信自己定义的一套组件。
WXSS 样式语言，用于描述 WXML 的组件样式
js 逻辑处理，网络请求
json 小程序设置，如页面注册，页面标题及tabBar。
app.json 必须要有这个文件 因为微信乱加把这个作为配置文件入口，整个小程序的全局配置。
app.js 必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss 全局样式
子页面调用公共js对象以便调用其方法
子页面想调用共公js的方法，需先在子页面js中先实例化app:具体过程如下
//app.js 中写子页面需要调用的公共方法 App({ // 自定义公共方法 commonFunction:function(){ return "公共方法" } })
在需要调用的子页面中
var app = getApp();//先实例化应用 // console.log(app)//可查看公共app.js里面的方法 Page({ data: { "label":app.commonFunction()//子页面中调用公共appjs的方法 } })
小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理
一般怎样封装微信小程序的数据请求
一、将所有的接口放在统一的js文件中并导出
二、在app.js中创建封装请求数据的方法
三、在子页面中调用封装的方法请求数据
有哪些参数传值的方法
二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值
<image src="../../../images/icon_delete.png" /><text>删除</text> //在删除图标与文字添加data-index="{{index}}"自定义属性以及绑定点击事件bindtap="delete" <view data-index="{{index}}" bindtap="delete"><image src="../../../images/icon_delete.png" /><text>删除</text></view>
实现delete方法，取index下标值 delete: function (e) { var index = parseInt(e.currentTarget.dataset.index); console.log("index" + index); }
如果不使用e.currentTarget而使用e.target会怎样？
将会导致仅点中<view>才能输出index值，点子元素<image>或<text>将输出NaN。
target是事件的真正发生者，currentTarget是注册了事件监听器的对象
e.target是tap点击事件触发的对象（也就是点击的是谁）
e.currentTarget是事件绑定在哪个元素上（也就是这个事件在哪个组件上）。
那target有什么用呢，用于区分子元素与外部元素要分别处理时，比如换用户头像的场景，点击头像本身预览大图，而头像所在的点整一行，将是切换头像。
试图从index数据中找出相应元素删除地址
// 找到当前地址AVObject对象 var address = that.data.addressObjects[index]; // 给出确认提示框 wx.showModal ({ title: '确认', content: '要删除这个地址吗？', success: function (res) { if (res.confirm) { // 真正删除对象 address.destroy().then(function (success) { // 删除成功提示 wx.showToast({ title: '删除成功', icon: 'success', duration: 2000 }); // 重新加载数据 that.loadData(); }, function (error) { }); } } })
<form bindsubmit="formSubmit"> <input name="detail" placeholder="详情地址" /> <input name="realname" placeholder="收件人姓名" /> <input name="mobile" placeholder="手机号码" type="number"/> <button formType="submit" type="primary">Submit</button> </form> formSubmit: function(e) { // detail var detail = e.detail.value.detail; // realname var realname = e.detail.value.realname; // mobile var mobile = e.detail.value.mobile; }
方式二
通过<input bindconfirm="realnameConfirm">实现
// 实现相应多个**Confirm方式 detailConfirm: function(e) { var detail = e.detail.value; } realnameConfirm: function(e) { var realname = e.detail.value; } mobileConfirm: function(e) { var mobile = e.detail.value; }
通过方式一与方式二的对比可以看出，虽然同样都能实现取值的目标，但是它们的使用场景有所不同，前者适合与提交大量表单项时，比如用户完善个人资料，收货地址填写；而后者适合只做一两个表单项时，比如快递单号录入，绑定手机号码。
如果需要类似ajax即时响应的，应该选用后者，因为input能使用<input bindinput="bindInput" />来实现即时取到值，比如商品搜索框输入手机关键字，应出现iPhone7，Mate8等候选词这样的场景。
四、在navigator中添加参数传值
从收货地址列表页中传地址id到编辑页面，以读取原地址供修改之用。address/list页面实现以下代码
<view class="container" data-index="{{index}}" bindtap="edit"><image src="../../../images/icon_edit.png" /><text>编辑</text></view>
edit: function (e) {
var that = this;
// 取得下标
var index = parseInt(e.currentTarget.dataset.index);
// 取出id值
var objectId = this.data.addressObjects[index].get('objectId');
wx.navigateTo({
url: '../add/add?objectId='+objectId
});
},
address/add页面实现onLoad(options)方法，从url路径中获取objectId
onLoad: function (options) { var objectId = options.objectId }
你使用过哪些方法，来提高微信小程序的应用速度？
一、提高页面加载速度
二、用户行为预测
三、减少默认data的大小
四、组件化方案
优势：
1、无需下载，通过搜索和扫一扫就可以打开。
2、良好的用户体验：打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面，与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。
劣势：
1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
4、依托于微信，无法开发后台管理功能。
第二条是开发成本的不同
只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG
第三条是获取系统级权限的不同
系统级权限都可以和微信小程序无缝衔接
第四条便是应用在生产环境的运行流畅度
长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立
小程序常见开发知识点总结：
嵌套循环时候，最好重命名下list和index
如果是嵌套循环，很容易出现多个list和index，例如表视图一样，所以在小程序中可以重命名 list 和index 方法为：wx:for-index='重命名' wx:for-list="重命名"
<view> 重命名list和index： <text class='{{classname}}' wx:for="{{array}}" wx:for-index="key" wx:for-item="value"> {{key}}--{{value}} </text> </view>
微信小程序fixed定位下scroll-view滚动失效
scroll-view外层容器宽度设置为100%就可以解决了
返回上一次传值方式
itemClick: function(e) {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({
message: e.currentTarget.dataset.msg,
})
wx.navigateBack({
delta: 1,
})
},
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出
pages[pages.length - 2] 是上一页，-1是当前页
然后直接调用上一页的setData方法
message 是上一页定义的变量，e.currentTarget.dataset.msg为当前页要传的数据
然后调用wx.navigateBack返回，delta表示返回的页数，如果delta大于现有页面数，则返回到首页。
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
区别：
wx:if 是遇 true 显示，hidden 是遇 false 显示。
wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。
所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。
如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
