微信小程序学习笔记

Alan

8 年前

小技巧

在app.json中输入如下代码就会自动在pages下创建welcome文件夹及相应的wxss, wxml, js, json文件（除以上后缀名，2017年8月更新版本新增.wxs扩展名）

"pages":[
  "pages/welcome/welcome"
]

Update: 新版小程序编辑器新增了一个新建page的选项，会自动生成上述4个文件并自动加入到app.json中（前提是文件中pages数组已存在）

小程序在纵向上的层级最多允许5级

在进行wx.for的数据绑定时可以不需要使用{{item.***}}的方式来获取数据，只需要引入数据时在前面加三个小点进行数据展开即可

<template is="templateName" data="{{...item}}" />

debugger：在js 文件中添加可进行断点调试

常见问题

1.Failed to load resource: net::ERR_NAME_NOT_RESOLVED

清除缓存即可

2.小程序APP ID

目前小程序仅接受企业用户的申请，没有公司的，网上有说可通过选择个体工商户及以下信息来获取APPID（未亲测）

企业名称：微信小程序俱乐部，营业执照注册号：440301103448669

Update: 小程序已接受个人开发者注册，就目前看除微信支付外与企业账户权限完全相同

3.页面设置背景色无法满屏

在页面的外面还有一层page元素，可以在wxss中通过对page设置背景色和高度来实现全屏的背景

page{
    background-color: #ccc;
    height: 100%;
}
#顶部导航的颜色修改需在app.json中添加
window":{
    "navigationBarBackgroundColor": "#ccc"
}

4.值设置为false不生效

小程序在脚本中可以定义值为布尔值false,但在文件中需要加引号，这样false会被解析为字符串，wxml文件中正确的做法是将值写成{{false}}
5. Uncaught Error: module “***.js” is not defined

小程序中可以通过module.exports输出，然后在另一个js文件中require获取输出的数据。但使用绝对路径小程序会从当前路径以下按路径进行文件查找，因此会出现上述报错，解决方法是修改为相对路径

6.Now you can provide attr “wx:key” for a “wx:for” to improve performance.

这段文字只是个警告，不做处理并不会影响程序运行，而处理方法是在wx:for后面添加上 wx:key=”key”就可以避免这个警告
7.pages/index/index 出现脚本错误或者未正确调用 Page()

在index.js或对应的js文件中加入如下代码即可：

Page({
  
})

8.pages/index/index.json Expecting ‘STRING’,’NUMBER’,’NULL’,’TRUE’,’FALSE’,'{‘,'[‘, got EOF

在index.json或对应的json文件中加入如下代码即可：

{
    
}

9.缺少文件，错误信息：error: iconPath=/images/***.png, file not found

出现这一错误只需将tabBar下的iconPath和selectedIconPath路径由/images/***.png修改为images/***.png即可解决问题
10.Failed to load resource: the server responded with a status of 400 (Bad Request)

使用wx.request请求豆瓣API时，出现这一错误，使用application/json和空以外的content-type（如json）可解决问题

主要元素及快捷键

view, text, image, block, this.setData

只有用text标签包围的文字才能长按选中

wx:if={{true或false}}来控制元素是否显示

wx:for=”{{}}” 循环 wx:for-item=”item”(不书写默认也是item), wx:for-index=”index”

navigateTo被认为跳转到子页面，导航上有返回按钮(onHide), redirectTo直接跳转，，导航上无返回按钮(onUnload)

bind和catch，如bindtap, catchtap，主要区别在前者为冒泡事件（父元素事件也会执行），后者为非冒泡事件

函数获取代码中的值，可通过自定义变量data-item-name, 在函数的function中传入event,再通过event.currentTarget.dataset.itemName来获取(事件捕获的组件用currentTarget[catchtap]，如果是当前点击的组件只用target即可[放在父级上有冒泡机制的bindtap])

注意：这里的data-item-name会被转换成itemName，而data-itemName实际会转换成itemname

this.setStorageSync(‘key’, ‘value’)

template文件.wxml

#直接引入,其中.wxml部分可予以省略
<include src="path/to/template/template.wxml" />
#wxml文件引入template，页首加入
<import src="path/to/template/*-template.wxml" />
#需绑定数据时添加data属性，使用模板处加入(templateName为template文件中定义的name值)：
<template is="templateName" data="{{...item}}" />
#wxss文件引入template，页首加入
@import "path/to/template/*-template.wxss"

快捷键：

Alt+Shift+F: 快速格式化

Ctrl+/: 注释

Cmd+P 快速查找文件

Cmd+E 搜索近期打开文件

Option+Shift+F 格式化代码