Rely on

  • Uni-app Framework official documentation
  • Uview-ui framework official documentation
  • View details about vUE support

The installation

npm install
Copy the code

Project start

npm run serve
Copy the code

Open the wechat developer tool after the project starts

npm run serve:open
Copy the code

Build wechat mini program production version

npm run build
Copy the code

Open the wechat developer tool after building the production version of wechat applets

npm run build:open
Copy the code

Build wechat mini program experience version

npm run trial
Copy the code

Open the wechat developer tool after building the mini program experience version

npm run trial:open
Copy the code

The environment can be switched at SRC /utils/http.js

const func = {
  development() { // Development environment
    wx.environ = env.pre
  },
  trial() { / / experience
    wx.environ = env.pre
  },
  production() { // Production environment
    wx.environ = env.production
  }
}
Copy the code

Sample request method

For usage, go to docs/ Request method example.mdCopy the code

Drop down to load the sample

For usage, go to docs/ drop down to load example.mdCopy the code

The use of global store and substore

  • The global store usage is the same as before
  • A Vuex Module + Namespaced store is used to view details
  • The namespace name uses the subcontract name
  • The following uses mall subcontracting as an example
  • The following is just an example for simple use, but it is also necessary to consult the official documents for complex ones. For example,mutations trigger the actions of the global store in the actions of the subcontractor store
  • CommonJS modularity is used below because require is used to load the substore at runtime
  • Load the store logic written in SRC /utils/mixin.js
  • When using stores, use subcontracted stores in preference to global stores
//packages/mall/store/state.js
module.exports = {
  count: 1
}

//packages/mall/store/mutations.js
module.exports = {
  increment(state, val) {
    state.count = val
  }
}

//packages/mall/store/index.js
const state = require('./state')
const mutations = require('./mutations')

module.exports = {
  state,
  mutations
}

// xxx.vue
<template >
  <view @click="onClick" >
    {{state.count}}
  <view>
</template>

<script>
export default {
  data() {
    return {
      state: this.$store.state.share
    }
  },
  methods: {
    onClick() {
      this.$store.commit('mall/increment', state.count + 1)}}}</script>
Copy the code

Navigation bar at the top of the page

  • Use the < U-navbar > component of UVIEW-UI first, otherwise there is no point in using the UI framework
  • You can use wx.g.ystem. NavbarHeight to get the height of the navigation bar
  • Not recommended wx. GetMenuButtonBoundingClientRect () to obtain information capsule
  • Because this method is a lot of trouble, different models feedback is different
  • Specific can view the community of other developers, put forward a variety of bug details to view
  • The sample
<template>
  <view>
    <u-navbar title="Home page" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      // Do something...
      // Its source is SRC /utils/system.js
      navbarHeight: wx.g.system.navbarHeight  
    }
  }
}
</script>
Copy the code

Matters needing attention

1. Page style versus component style
  • The style of the page affects the style of the component. See component style isolation
  • The styles between components do not matter
  • Uni-app should use apply-shared mode when creating components
  • The solution
  • The first kind of
  • For example:
  • Each class of the WXSS file also has an example:.container.data-v- XXX
  • This will increase the size of the project by a lot compared to the size without scoped, and the subcontracting limit for each micro program is 2M
  • Therefore, this method is not considered for the time being and is not recommended for use
  • Second (recommended)
  • All class names on the page start with p- (p stands for page) example: p-container
  • For example, _container
  • Do not use these two leads for component styles, so that the style of the page does not affect the style of the component
  • There is one advantage to the fact that the style of the page can affect the style of the component
  • You can change the style of the component directly on the page
  • Finally, g- is the beginning of global SCSS and u- is the beginning of UVIEW-UI SCSS
2. The < U-picker > component of uView-UI
  • Please do your best not to use the < U-picker > component
  • This component references a provincial file size of about 140KB
  • And it is added to the main package, the size limit of the main package is 2M
  • It is recommended to use the < U-select > component to use the wechat applet native component internally
  • , and this component, no
  • Introduce provincial and municipal documents
3. Global components
  • Global components are not referenced
  • Can be used directly in templates
  • The premise is to follow /components/n/n.vue
  • To create a component in this format refer to the global

    component
  • The subcontracted components still need to be referenced
  • I wanted to do it without a quote
  • But imagine if someone else redeveloped your code
  • It is difficult to find the source of the component
4. Reference static files
  • It is recommended that you refer to it as follows
  • Static
  • Static
  • The advantage of this reference is that we don’t need to change the file path when we copy the code
  • It is also possible to quickly locate the image from the path
5. Refer to subcontracted common components
  • It is recommended that you refer to it as follows
  • Import list from ‘@/packages/ components/xxx.vue’ import list from ‘@/packages/ components/xxx.vue’
  • The advantage of this reference is that we don’t need to change the file path when we copy the code
  • It is also possible to quickly locate components from a path
6. Storage problems of components
  • If only the components on the current page are used, you are advised to create a new component in the current page directory
  • This has the advantage of creating a new namespace without having to worry about the component being referenced in multiple places
  • Please refer to the channel-code and Statistics pages of market subcontracting for details
  • When are subcontracted common components stored? I set this up if a component is referenced by more than two pages
  • At this point, you can place it in the subcontractor’s common Components folder
  • Imagine if all the components of a subcontracted page were placed in a common component
  • It’s hard enough naming it, but when it gets big,
  • There are dozens of files in this folder, both common components and page components
  • A component can be referenced by God knows how many pages, and the changes will affect everything

Project directory structure

├ ─ public | └ index. The HTML ├ ─ scripts under the scripts of js file is used for auxiliary project, do not respond to normal development, Feel interested students can see | ├ ─ optimize - uview - UI. Js | ├ ─ the set - appid. Js | ├ ─ wechatdevtools - cli | | ├ ─ the find - cli - path. Js | | ├ ─ open. Js | | ├ ─ serve - open - wxdevtools - plugin. Js | | └ upload. Js ├ ─ docs project documents and some methods and the use of components sample | └ pull up and down load sample. Md ├ ─ SRC | ├ ─ components global common components According to the format (/ components/n/n.v ue) | | ├ ─ loadmore in. Vue file can be used directly, do not need to quote, Refer to the global < loadmore > component | | | └ loadmore. Vue | ├ ─ packages WeChat applet of the subcontract, Details see https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html | | ├ ─ the main | | | ├ ─ the static main package static files | | | ├ ─ pages main package of pages is strongly recommended that pages according to the format the new page/folder name/index. The vue | | | | ├ ─ index | | | | | ├ ─ components are suggested If the component is only used for the current page, In the current page directory, please create a new components | | | | | | └ XXX. Vue don't components will be used only for the current page in the common components. | | | | | └ index. Vue | | | ├ ─ components main common components of | | | | └ coupons. Vue | | | ├ ─ store main package Vuex store only applies to the main package, when to use the store, Should give priority to use master package store to consider using a global store | | | | ├ ─ index. The js | | | | ├ ─ mutations. Js | | | | ├ ─ state. The js | | | ├ ─ SCSS main public SCSS document | | | ├ ─ utils main package tool function or some auxiliary js file write here | | | ├ ─ plugins for main package to use third-party plug-ins, when to refer to the plugin, Reference should be a priority in the main pack Consider global references | | ├ ─ mall | | | ├ ─ static subcontract the static file | | | ├ ─ pages subcontract pages strongly recommend according to the format of the new page pages/folder name/index. The vue Refer to share the subcontract | | | | ├ ─ activity | | | | | └ index. The vue | | | ├ ─ the components of the subcontract the common components of | | | | └ coupons. Vue | | | ├ ─ Vuex store the subcontract Store only works within a subcontract, and when store is used, The store should give priority to use the subcontracts | | | | ├ ─ index. The js if the subcontract is not create store refer to the store that share the subcontract | | | | ├ ─ mutations. Js subcontract loading logic is written in the store SRC/utils/mixins. Js | | | | ├ ─ state. The js | | | ├ ─ SCSS subcontract public SCSS document | | | ├ ─ utils subcontract tool function or some auxiliary js file write here | | | ├ ─ the plugins Store the subcontract to use third-party plug-ins, when to refer to the plugin, reference should be a priority in the subcontract | | ├ ─... Other subcontracting will be introduced one by one, Because the formats are almost | ├ ─ plugins global third party plugins | | └ index. The js | ├ ─ SCSS global SCSS | ├ ─ static global static file | ├ ─ store global Vuex store | | ├ ─ index. Js | | ├ ─ mutations. Js | | └ state. The js | ├ ─ utils | | ├ ─ system. Js cache wx. GetSystemInfoSync data, Can use wx. G.s ystem. XXX access | | ├ ─ HTTP. Js for wx. Request of encapsulation, combed the alias method again, wx.$http, wx.$get, wx.$post, Wx $delete | | ├ ─ index. The js utils folder all js file entry Finally in the main. Js reference registration | | ├ ─ index. The js unified login logical processing | | ├ ─ mixins. Js Vue global mixin | | └utils.js Some useful tools, Can use wx. Utils. XXX access | ├ ─ App. Vue App. Vue WeChat applet App. With js, App. CSS | ├ ─ main. Js | ├ ─ the manifest. Json platform configuration Details see https://uniapp.dcloud.io/collocation/manifest | ├ ─ pages. Json routing registered here | ├ ─ uni. SCSS uni. Only SCSS variables are stored in the SCSS document ├ ─ README. The md ├─ Bass.config.js ├─ Package-Lock. json ├─ Package.json ├─ Postcss.config.js ├─tsconfig.json Don't delete ├ ─ vue. Config. Js support co., LTD Details see https://uniapp.dcloud.io/collocation/vue-configCopy the code

Item uniform filter popover style

For details, go to SRC/SCSS /popup.scssCopy the code

Wechat developer tool – The following configuration is recommended

  • The project has been converted from ES6 to ES5 after compilation, so do not check it, it will slow down
  • The project has been completed after compilation

The following plug-ins can be installed in vscode to provide code hints

uniapp-snippet
uview-snippet
Copy the code

Thank you for reading this document in your busy schedule