企业官网建设流程全解析

1. 原生微信小程序基础语法入门指南

刚接触微信小程序开发时，最让人头疼的就是那些看似简单却暗藏玄机的基础语法规则。作为从2017年就开始做小程序的老司机，我见过太多新手因为基础不牢导致项目后期各种诡异问题。今天我们就来彻底拆解小程序开发中最核心的那些语法要点，让你少走弯路。

微信小程序的基础语法体系主要包含三大模块：WXML（模板语言）、WXSS（样式语言）和JavaScript（逻辑层）。与普通网页开发不同，小程序对这些技术做了深度定制，形成了自己特有的语法规则。比如在WXML中你不能直接用HTML的div标签，而要用view组件；在WXSS里选择器的用法和CSS也有些微差异。这些细节往往就是新手最容易踩坑的地方。

2. WXML模板语法精要

2.1 基础组件与数据绑定

小程序的WXML相当于HTML的变体，但组件系统完全不同。最常用的基础组件包括：

• view：相当于div，是布局的基本容器
• text：专门用于显示文本（注意：直接写文字不包裹在text里会报警告）
• image：图片组件必须用这个，不能直接用img
• button：按钮组件有开放能力等特殊属性

数据绑定使用Mustache语法（双大括号）：

<view>{{message}}</view>

在JS中定义：

Page({ data: { message: 'Hello World' } })

重要提示：小程序的数据绑定是单向的，修改数据必须通过this.setData()方法，直接修改this.data不会触发视图更新。

2.2 条件渲染与列表渲染

条件渲染使用wx:if和hidden：

<view wx:if="{{condition}}">条件成立显示</view> <view hidden="{{!condition}}">条件不成立时隐藏</view>

两者区别在于：

• wx:if是真正的条件渲染，不满足时节点不会渲染
• hidden只是控制显示隐藏，节点始终存在

列表渲染使用wx:for：

<view wx:for="{{array}}" wx:key="id"> {{index}}: {{item.name}} </view>

wx:key的重要性：列表变化时帮助框架识别节点，提升性能。可以用item的某个唯一字段，或者直接写*this表示item本身是唯一值。

2.3 事件处理与传参

事件绑定以bind或catch开头：

<button bindtap="handleTap">点击</button>

区别：

• bind事件不会阻止冒泡
• catch事件会阻止冒泡

传参通过data-属性：

<button bindtap="handleTap">handleTap: function(e) { const id = e.currentTarget.dataset.id; }

3. WXSS样式语言实战技巧

3.1 尺寸单位与样式导入

小程序推荐使用rpx作为尺寸单位，它可以根据屏幕宽度自适应：

• 设计稿按750rpx宽度设计
• 1rpx = 屏幕宽度/750
• 在iPhone6上，1rpx=0.5px

样式导入使用@import：

@import "common.wxss";

实测经验：rpx在部分Android机型上计算会有误差，对于边框等需要精确控制1px的情况，建议直接使用px单位。

3.2 选择器特性和限制

WXSS选择器与CSS类似，但有重要限制：

• 不支持通配符*
• 不支持属性选择器[attr]
• 不支持级联选择器（如：.a .b）
• 优先级计算与CSS一致

推荐使用BEM命名规范来避免样式冲突：

.user__avatar--large { width: 120rpx; }

3.3 全局样式与局部样式

每个page的wxss只对当前页面有效，app.wxss则是全局样式。样式覆盖规则：

1. 全局样式
2. 页面样式
3. 内联样式

常见问题：在页面wxss中修改组件样式无效？这是因为自定义组件有样式隔离，需要设置：

Component({ options: { styleIsolation: 'shared' // 取消样式隔离 } })

4. JavaScript逻辑层核心要点

4.1 页面生命周期

一个Page的完整生命周期：

Page({ onLoad(options) {}, // 页面加载 onShow() {}, // 页面显示 onReady() {}, // 页面初次渲染完成 onHide() {}, // 页面隐藏 onUnload() {}, // 页面卸载 onPullDownRefresh() {}, // 下拉刷新 onReachBottom() {}, // 上拉触底 onShareAppMessage() {} // 分享 })

避坑指南：onLoad和onShow的区别很重要。从二级页面返回不会触发onLoad但会触发onShow，适合在这里更新数据。

4.2 数据通信与缓存

页面间通信方式：

1. URL传参：适合简单数据

wx.navigateTo({ url: '/page?id=123' })

2. 全局变量：app.js中定义

// app.js App({ globalData: { userInfo: null } }) // 页面中使用 const app = getApp() app.globalData.userInfo = {...}

3. 本地缓存：wx.setStorage/wx.getStorage

缓存策略建议：

• 频繁更新的数据不要放缓存
• 敏感信息不要放缓存
• 单个key不要超过1MB

4.3 异步处理最佳实践

小程序的异步API都采用回调风格，但建议用Promise封装：

// 封装wx.request function request(options) { return new Promise((resolve, reject) => { wx.request({ ...options, success: resolve, fail: reject }) }) } // 使用async/await async function fetchData() { try { const res = await request({url: '...'}) console.log(res.data) } catch (err) { console.error(err) } }

5. 常见问题排查手册

5.1 渲染相关问题

问题：数据更新了但视图没变？

• 检查是否用了this.setData()
• 检查data路径是否正确（如数组更新要用array[0].prop形式）
• 检查是否在非Page/Component中直接调用了setData

问题：列表渲染性能差？

• 确保wx:key使用唯一值
• 大数据列表使用虚拟列表方案
• 避免频繁setData大数组

5.2 样式问题排查

问题：样式不生效？

• 检查选择器是否正确
• 检查样式隔离配置
• 检查是否有更高优先级的样式覆盖
• 检查rpx单位计算是否符合预期

问题：自定义组件样式异常？

• 尝试设置styleIsolation
• 检查是否使用了:host选择器
• 检查组件是否定义了externalClasses

5.3 真机调试技巧

1. vConsole不显示？

• 确保开启了调试模式
• 检查基础库版本是否支持
• 尝试清除小程序数据重新进入

2. 真机与模拟器表现不一致？

• 检查手机系统版本
• 检查微信版本
• 检查网络环境差异
• 特别注意Android和iOS的差异

3. 使用自定义组件时报错？

• 检查json文件中是否正确定义
• 检查路径是否正确
• 检查组件是否包含多个根节点

6. 进阶技巧与性能优化

6.1 自定义组件开发

创建组件：

components/ my-component/ my-component.js my-component.json my-component.wxml my-component.wxss

json配置：

{ "component": true, "usingComponents": {} }

组件通信方式：

1. 属性传递：properties
2. 事件触发：this.triggerEvent
3. 父组件直接访问：selectComponent

6.2 动画实现方案

方案一：CSS动画

.fade-in { animation: fadeIn 1s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

方案二：JS动画API

this.animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease' }) this.animation.opacity(1).step() this.setData({ animation: this.animation.export() })

6.3 性能优化 checklist

1. 数据优化：

• 避免频繁setData
• 控制setData数据量
• 合并多次setData调用

2. 图片优化：

• 使用合适的尺寸
• 使用WebP格式
• 懒加载非首屏图片

3. 代码优化：

• 移除未使用的代码
• 按需加载自定义组件
• 使用分包加载

4. 渲染优化：

• 使用hidden替代wx:if
• 避免过深的节点层级
• 使用scroll-view的优化参数

我在实际项目中最深刻的体会是：小程序开发看起来简单，但要做出高性能、体验好的产品，必须吃透这些基础语法背后的设计原理。比如为什么要有样式隔离？为什么数据绑定要用setData？理解这些设计意图，才能写出更符合小程序理念的代码。