在小程序开发中,我们需要转变展现形式、开发模式、体验思路、发布模式、性能思路和技术选型等多方面的思维。以下通过一些代码示例,展示微信小程序开发中需要转变的思路。
- 展现形式转变
在传统Web开发中,我们通常这样切换页面:
<!-- index.html -->
<a href="about.html">关于我们</a><!-- about.html -->
<h1>关于我们</h1>
<p>我们是一家专注于技术开发的公司...</p>
但在小程序中,我们需要使用导航的方式:
<!-- index.wxml -->
<navigator url="/pages/about/about">关于我们</navigator><!-- about.wxml -->
<view><view>关于我们</view><view>我们是一家专注于技术开发的公司...</view>
</view>
- 开发模式转变
传统Web开发中,前端通过Ajax获取数据:
// 前端获取数据并渲染
$.ajax({url: '/api/data',success: function(data) {renderData(data);}
});
而在小程序中,我们更推荐在服务端获取数据,视图层只做渲染:
// 服务端获取数据
const data = await getData();
// 视图层渲染
this.setData({ data });
- 体验思路转变
以下是一个传统Web端的复杂UI:
<header><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li><li><a href="/products">Products</a></li>...</ul></nav>
</header>
<main>...
</main>
<footer>...
</footer>
而小程序中,我们需要转变为极简的交互设计:
<view><swiper><swiper-item><image src="..."/></swiper-item>...</swiper><view>精选商品</view><view><navigator url="..."><image src="..."/><view>商品名称</view></navigator>...</view>
</view>
- 发布模式转变
小程序发布需要先通过审核,例如需要在代码中添加如下配置:
// project.config.json
{"sitemapLocation": "sitemap.json"
}// sitemap.json
{"desc": "关于本小程序的介绍","navItems": [{"text": "首页","path": "pages/index/index"},...],...
}
- 性能思路转变
在小程序开发中,我们需要精简组件、精简数据通信、精简代码,比如:
<!-- 精简组件 -->
<view wx:if="{{condition}}"><view>显示内容</view>
</view><!-- 精简数据通信 -->
<view wx:for="{{list}}" wx:key="id"><text>{{item.name}}</text>
</view><!-- 精简代码 -->
<wxs module="utils">
var filterData = function(data) {// 精简的数据处理逻辑
}
module.exports.filterData = filterData;
</wxs>
- 技术选型转变
小程序无法直接使用许多第三方库,需要谨慎技术选型,例如选择符合规范的UI库:
// package.json
{"dependencies": {"lin-ui": "^0.8.6",...}
}
<!-- index.wxml -->
<l-status show="{{true}}" type="cart-fav" />
小结：在小程序开发中,我们需要转变展现形式、开发模式、体验思路、发布模式、性能思路和技术选型等多方面的思维,这些代码示例就是对应不同思路转变的具体体现。
)
