Alan Hou的个人博客

微信小程序学习笔记

微信小程序学习笔记

小技巧

在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 格式化代码

RPX

iPhone6下 1px=1rpx=0.5pt

所以通常小程序我们会按iPhone6的尺寸来做设计稿:即750px宽*1334px高

更多设备请访问:移动设备分辨率大全 >

相关链接:
微信小程序开发工具

python+Django实现微信小程序支付功能

退出移动版