In the development of small programs, improving development efficiency, optimizing code quality and enhancing user experience are the goals that every developer pursues.
Next, let’s talk about how to improve development efficiency in terms of small program development frameworks. Among them, WePY is a slightly less popular development framework based on Vue.js small program development framework, which provides a better development experience and more efficient development methods . Of course, there are more popular ones on the market, such as the mpvue applet development framework that we are more familiar with. Here is another possible option for everyone.
WePY is a rapid development framework for small programs officially produced by Tencent. It re-encapsulates the development model of native small programs, which is closer to the MVVM architecture model, and supports some new features of ES6/7. At the same time, the syntax style is close to Vue.js , using the WePY framework can improve the development efficiency of small programs.
mpvue is already a development framework that everyone is familiar with, so I won’t make too many explanations. Here, I will demonstrate how to get started and master WePY from a specific practical operation.
1. Get Started Quickly
Before getting started, make sure you have Node.js and npm installed. Next, we will quickly get started with the wepy framework in a few simple steps.
Step 1: Install wepy
First, install the wepy scaffolding by running the following command at the command line:
npm install wepy-cli -g
Step 2: Create a wepy project
Next, we create a new wepy project using wepy-cli. Run the following command at the command line:
wepy init standard mywepyproject
This will create a new project called mywepyproject, using wepy's standard template.
Step 3: Run the project
After the project is created, enter the project directory and install dependencies:
cd mywepyproject
npm install
Once installed, run the following command to start the project:
npm run dev
This will start a local development server and open the project's preview page in your browser.
Step 4: Modify the page
Now, we can start modifying the page. In the src/pages/index/index.wpy file, we can see that wepy uses Vue-like template syntax and component development. Let's change the page title to read "Welcome to wepy".
<template>
<view>
<text class="title">欢迎使用wepy</text>
</view>
</template>
After saving the file, the preview page will automatically refresh and display the modified content.
So far, we have completed the process of creating and modifying a simple wepy project. Next, let's dive into more functions and features of wepy.
2. Basic functions and features
1. Component development
wepy supports component-based development similar to Vue, which can split pages into multiple independent components to improve code reusability and development efficiency. Below we use a practical case to illustrate the application of component development in wepy.
Suppose we have a small program project, which contains a product list page and a product detail page. We can abstract the product list and product details into two components and refer to them where needed.
First, we create a component called GoodsList. Create a GoodsList.wpy file in the src/components directory and write the following code:
<template>
<view>
<text class="title">商品列表</text>
<view class="goods">
<repeat for="{
{goodsList}}" index="index" item="item">
<view class="goods-item">
<image class="goods-image" src="{
{item.image}}"></image>
<text class="goods-name">{
{
item.name}}</text>
</view>
</repeat>
</view>
</view>
</template>
<script>
import wepy from 'wepy';
export default class GoodsList extends wepy.component {
data = {
goodsList: [
{
name: '商品1', image: 'path/to/image1.jpg' },
{
name: '商品2', image: 'path/to/image2.jpg' },
{
name: '商品3', image: 'path/to/image3.jpg' },
],
};
}
</script>
<style>
.title {
font-size: 20px;
font-weight: bold;
}
.goods {
display: flex;
flex-wrap: wrap;
}
.goods-item {
width: 100px;
margin-right: 10px;
}
.goods-image {
width: 100px;
height: 100px;
}
.goods-name {
margin-top: 5px;
text-align: center;
}
</style>
This component contains a list of goods, traverses the goodsList array through the label, and displays the picture and name of each product.
Next, reference this component in the product list page. In the src/pages/goods/index.wpy file, write the following code:
<template>
<view>
<goods-list></goods-list>
</view>
</template>
<script>
import wepy from 'wepy';
import GoodsList from '../../components/GoodsList';
export default class GoodsPage extends wepy.page {
components = {
GoodsList,
};
}
</script>
<style>
/* 样式代码省略 */
</style>
We have introduced the GoodsList component to the goods list page by using tags in the template.
Similarly, we can also create a product detail component called GoodsDetail and reference it in the product detail page.
Through component development, we can split the page into multiple independent components, which reduces the coupling of the code and improves the reusability and maintainability of the code. Each component has its own template, script and style, can be developed and tested independently, and can be reused in different pages.
Next, we continue to introduce other functions and features of wepy.
2. Data binding
wepy supports data binding, the data of the page or component can be defined through the data attribute, and directly referenced in the template. Templates are automatically updated when data changes.
<template>
<view>
<text>当前计数：{
{
count}}</text>
<button @tap="increment">增加</button>
</view>
</template>
<script>
import wepy from 'wepy';
export default class Counter extends wepy.page {
data = {
count: 0,
};
increment() {
this.count++;
}
}
</script>
In the above example, we defined a counter component, which contains a count variable count and an increase button. When the button is clicked, the increment method is triggered through the @tap event to increase the count variable. The template uses double curly braces { {count}} to refer to the count variable. When the count changes, the template will be automatically updated.
3. Event processing
Wepy uses a Vue-like event handling mechanism, which can bind events in templates by @event name, and define corresponding methods in scripts to handle events.
<template>
<view>
<button @tap="handleTap">点击我</button>
</view>
</template>
<script>
import wepy from 'wepy';
export default class EventDemo extends wepy.page {
handleTap() {
wepy.showToast({
title: '按钮被点击了',
icon: 'none',
});
}
}
</script>
In the above example, when the button is clicked, the handleTap method is triggered, and a prompt box is displayed in the method.
4. Routing management
wepy provides the function of routing management, which can jump and pass parameters between pages through routing.
In the above example, when the button is clicked, the wepy.navigateTo method is used to jump to the details page, and a parameter named productId is passed.
<!-- src/pages/detail/index.wpy -->
<template>
<view>
<text>商品详情页</text>
<text>商品ID: {
{
productId}}</text>
</view>
</template>
<script>
import wepy from 'wepy';
export default class DetailPage extends wepy.page {
data = {
productId: '',
};
onLoad(options) {
this.productId = options.productId;
}
}
</script>
In the above example, we use double curly braces {{productId}} in the template of the details page to display the received product ID parameter.
<!-- src/pages/detail/index.wpy -->
<template>
<view>
<text>商品详情页</text>
<text>商品ID: {
{
productId}}</text>
</view>
</template>
<script>
import wepy from 'wepy';
export default class DetailPage extends wepy.page {
data = {
productId: '',
};
onLoad(options) {
this.productId = options.productId;
}
}
</script>
Through the routing management function provided by wepy, we can easily realize the jump and parameter transfer between pages, providing a better user navigation experience.
3. Advanced skills and best practices
In addition to basic functions and features, wepy also provides some advanced tips and best practices to help developers optimize the performance of small programs, improve development efficiency and code quality.
Here are some advanced tips and examples of best practices:
Use wepy's plugin system to extend the functionality of wepy. For example, you can use the wepy-redux plugin to integrate the Redux state management library for better data management and state control. Optimize network requests, reduce the number of requests and the amount of data transmission.
You can use wepy.request to send network requests, and make reasonable use of cache and local storage to improve data loading speed.
Reasonable use of wepy's lifecycle functions for page initialization and resource recovery. For example, clean up timers, unsubscribe and other resource release operations in the onUnload lifecycle function to avoid memory leaks. Use the best practices of componentized development to split the page into multiple small components to improve code reusability and maintainability. At the same time, pay attention to the communication and data transmission methods between components to avoid data redundancy and unnecessary performance consumption.
Cross-platform adaptation, considering the display effect and interaction differences on different platforms. wepy provides the capability of cross-platform compilation, and can develop small programs adapted to multiple platforms in the same code base.
By applying these advanced techniques and best practices, the performance and development efficiency of Mini Programs can be further improved, while code quality can be optimized to provide users with a better experience.
Of course, in addition to using the wepy and Mpvue development frameworks, we also have some other small program value mining.
Here we also recommend a way to deepen the value of small programs, directly moving existing small programs to run in your own App. This implementation technology path is called small program containers. For example, FinClip SDK allows your own Some Apps can run Mini Programs directly like WeChat.
In this way, not only can the development efficiency of small programs be improved through the front-end framework, but also the small programs can be run in apps other than WeChat, which truly realizes one-end development and multi-terminal shelves. App has hot update capability to avoid frequent AppStore review.