1 Introduction
1. Register the WeChat Mini Program
If you do not have an account on the WeChat public platform, please enter the homepage of the WeChat public platform and click the "Register Now" button to register. The type of registered account can be a subscription account, service account, mini program, or corporate WeChat . We can choose "mini program".
Then fill in the account information. It should be noted that the email address filled in must be an email address that has not been registered on the WeChat public platform or bound by a personal WeChat account, and each email address can only apply for one Mini Program.
After activating the mailbox, select the subject type as "personal type", and register the subject information as required. After the subject information is submitted, it cannot be modified. The subject will become the only legal subject and contracting subject for you to use the services and functions of the WeChat Official Accounts Platform, and cannot be changed or modified when other business functions are subsequently opened.
2. WeChat developer tools
Download the WeChat web developer tool , and download the corresponding installation package according to your own operating system to install it.
1. Create a new project
2. Page introduction
3. Project composition
4. page.json file
pages registration page
window window information
5. Create a new page
- Right click on the pages folder to create a new folder
- Right click in the file to create a new page
- Which page is on the top, which page is displayed by default
- JSON requires strict syntax, no extra comments and commas
So the new page is built, let's see what's there
ceshi.wxml template file
ceshi.js business logic
ceshi.wxss style
ceshi.json page configuration
Adjust the newly created file path to the top and that is the home page, which means that the first path is the path of the home page!
Page configuration:
"enablePullDownRefresh": true, 允许下拉刷新
"backgroundTextStyle": "dark", 背景文字颜色
"backgroundColor":"#f70", 背景颜色
"usingComponents":{} 组件
Three, basic grammar
The template syntax of the applet is approximately equal to the template syntax of vue
1. Text rendering
{
{ msg}}可以执行简单的js表达式
{
{2+3}}
{
{msg.length}}
2. Conditional rendering
wx:if=""
wx:elif=""
wx:else
3. List rendering
wx:for="{
{list}}"
wx:key="index"
{
{item}}
{
{index}}
4. Custom list rendering
定义item与index的名称
wx:for="{
{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{
{myidx}}
{
{myitem}}
5. Import
(uncommonly used)
import
can only import template content
template/utils.wxml
<template name="userCart"> username: { {name}} </template>
home.wxml
<import src="/template/utils.wxml">
<tempate is ="userCart" data="{ {...u1}}">
include
can only import non-template content
template/foot.wxml <view>{ {content}}</view>
home.wxml <include src="/template/foot.wxml">
The functions of this system mainly include:
- User registration, login,
- information maintenance,
- member search,
- personalized recommendation
- administrator for information management, etc.
- WeChat flower mall mini program
- Post a product
- commodity purchase
- Sales statistics
- Background + applet development
- Data excel export
3 Key technologies of the system
Use WeChat applet, springboot, vue, mysql, mybaties, typescript, html, css, js, etc. for development
4 Development Tools
Development tools mainly include: idea, jdk1.8, maven, mysql5.7, Navicat, WeChat developers, etc.
5 code display
@RequestMapping("/strategy")
@RestController
@Scope("prototype")
public class StrategyController {
@Autowired
private StrategyService strategyService;
@Value("${web.upload-path}")
private String path;
@RequestMapping("/findPage")
public ObjDat<Strategy> findPage(Strategy strategy, @RequestParam(value="page", defaultValue="1") int page, @RequestParam(value="limit", defaultValue="10") int limit){
return strategyService.findPage(strategy,page-1,limit);
}
@RequestMapping("/edit")
public JsonResult edit(HttpServletRequest request, Strategy strategy) throws IOException {
User user=(User)request.getSession().getAttribute("user");
if(user==null){
return JsonResult.error("请登录");
}
String str=strategyService.edit(request,strategy);
if(str.equals("成功")){
return JsonResult.success("操作成功");
}else{
return JsonResult.error("操作失败");
}
}
6 System function description
Project function demo