1. Develop with HBuilderX
1. Install HBuilderX
The installation address: www.dcloud.io/hbuilderx.h…
2. Create the project
Go to File -> New -> Project in the toolbar:
Select the uni-app type, enter the project name, select the template, and click Create.
The template chosen is the UNI UI project template, which is recommended for daily development and has a large number of common components built-in.
2. Run the project into wechat developer tools
1. Set the AppID of the wechat applet
Click mainifest.json -> wechat Applet Configuration -> wechat Applet AppID in the project, and fill in the AppID of your project.
2. Set wechat developer tools
In the taskbar, click Tools > Run Configuration > Applet Development Tool Path and fill in the local developer tool path.
3. Run small programs in wechat Developer tools
Click tools in the taskbar -> Run to Small Program Simulator -> wechat Developer Tools.
After the project is compiled by uni-app, a small program will be generated and the wechat developer tool will be automatically opened. The generated code is in the unpackage directory.
Note: Since applets are compiled automatically, do not modify the applets code in developer tools, but in HBuilderX.
3. Close sitemap
Json -> Source View -> mp-weixin in the project and add “checkSiteMap”: false.
The saved code will be compiled automatically, and the compiled applet will have “checkSiteMap”: false in the project.config.json file.
Use Git to manage projects
1. Create git ignore files
Create.gitignore in the root directory and ignore files that do not need to be tracked
/. Gitignore:
/node_module
/unpackage/dist
Copy the codeBecause the /unpackage/dist folder is ignored, but you don’t want to ignore /unpackage folder, so add the.gitkeep file to /unpackage to ensure that the unpackage directory is properly tracked by Git.
2.Git local management projects
Open PowerShell in the root directory and execute the following code:
Git add. // Add files to the temporary storage. Git commit -m "project framework" // Commit the projectCopy the code3. Host the project to the code cloud
git remote add origin [email protected]:jixueyuandi/happy-store.git
git push -u origin master
Copy the codeCreate tabBar
1. Git create tabbar branch
Git checkout -b tabbar // create a tabbar branchCopy the code2. Create a Tabbar page
Right-click Pages, create a new page, fill in the page name, and select the SCSS template.
Create home, Cate, Cart, and My pages
3. Set the tabBar
Add the tabBar setting to /pages.json
"TabBar" : {" selectedColor ":" # d81e06 ", "a list" : [{" pagePath ":" pages/home/home ", "text", "home page", "iconPath" : "/static/tab_icons/home.png", "selectedIconPath": "/static/tab_icons/home-selected.png" }, ...... ] }Copy the codeModify the page navigation and page background
"GlobalStyle" : {" navigationBarTextStyle ":" white ", "navigationBarTitleText" : "happy shopping", "navigationBarBackgroundColor" : "#c00000", "backgroundColor": "#F8F8F8" },Copy the codePage effect:
4. Commit the code merge branch
Submit local code:
Git add. Git commit -m "Create tabbar"Copy the codePush the Tabbar branch to the remote repository for saving:
git push -u origin tabbar
Copy the codeSwitch to the master branch locally, merge the Tabbar branch, and submit to the remote repository
git checkout master
git merge tabbar
git push
Copy the codeDelete the tabbar branch
git branch -d tabbar
Copy the code6. Home page
1. Create a home branch and view all branches
git checkout -b home
git barnch
Copy the code2. Install the network request plug-in @escook/ Request-miniProgram
npm init -y
npm install @escook/request-miniprogram
Copy the codeSet the root path, request intercept, and response intercept
Create /utils/http.js: Import the @escook/ request-miniProgram package and set the root path, request interception and response interception
@escook/ request-miniProgram import {$HTTP} from '@escook/ request-miniProgram '$http.baseurl = $http.beforerequest = function(options) {uni.showloading ({title:' loading...... $http.afterRequest = function(options) {uni.hideloading ()} export default $HTTP;Copy the codeMount globally in /main.js:
Mount uni globally.$HTTP = $HTTPCopy the code$showMsg() $showMsg()
Create a new showmsg.js file in the utils folder:
$showMsg = function(title = "data request failed!") , duration=1500, icon="none") { uni.showToast({ title:title, duration:duration, icon:icon }) } export default $showMsg;Copy the codeMount globally in /main.js:
Mount uni globally.$showMsg = $showMsgCopy the code4. The Home page is complete
/pages/home/home.vue
Data is written in data as vUE, methods are written in methods as vue, and the life cycle is the same as small programs.
<template> <view> <! Swiper :indicator-dots="true" :autoplay="true" :duration="1000" :interval="3000"> <swiper-item v-for="(item, index) in swiperList" :key="index"> <navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail? goods_id=${item.goods_id}`"> <image :src="item.image_src"></image> </navigator> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { swiperList: [], }; }, onLoad() { this.getSwiperList(); }, methods:{async getSwiperList() {const {data: resData} = await uni.$http.get('/api/public/v1/home/swiperdata'); if(resData.meta.status == 200) this.swiperList = resData.message; } } } </script> <style lang="scss"> swiper { height: 300rpx; .swiper-item,image { width: 100%; height: 100%; } } </style>Copy the code5. Merge home branch
Check whether the branch is the Home branch and check the current file status:
git branch
git status
Copy the codeSave the local code:
Git add. git commit -m "Complete the home page"Copy the codeHome branch push to remote repository:
git push -u origin home
Copy the codeSwitch to the master branch locally, merge the Home branch, and push to the remote repository:
git checkout master
git merge home
git push
Copy the codeDelete the local home branch
git branch -d home
Copy the code