Project address: github.com/alasolala/m…

General situation of

function

There are three main functions

  • Get content from Github Trending
  • Search the warehouse
  • Mark the warehouse for quick discovery

Technology stack

It is mainly native development, using the following libraries and tools:

  • @vant/ retry p: UI component libraries
  • Js-base64: The base64 content used to decode readme
  • Wemark: Markdown rendering library for readme
  • Easy-less: Compiles less to WXSS

The development of

The preparatory work

(1) Register a small program account and get an AppId

(2) Download the wechat developer tool, create a project, and fill in the project name, directory and AppId

(3) Delete the page of the original template project, create your own page, and register the page in app.json

//app.json { "pages": ["pages/trending/trending", // the first is to enter the initial page of the small program "pages/search/search", "pages/mark/mark", "pages/detail/detail"]}Copy the code

The configuration TAB

//app.json {"tabBar": {"selectedColor": "#243b55", // Unselected text "color": "#8a8a8a", // unselected text "list": [{"pagePath": "pages/trending/trending", "text": "trending", "iconPath": "images/tab/trending-light.png", "selectedIconPath": "images/tab/trending-dark.png" }, { "pagePath": "pages/search/search", "text": "search", "iconPath": "images/tab/search-light.png", "selectedIconPath": "images/tab/search-dark.png" }, { "pagePath": "pages/mark/mark", "text": "mark", "iconPath": "images/tab/mark-light.png", "selectedIconPath": "images/tab/mark-dark.png" } ] }, }Copy the code

Use less

The style file of the small program is WXSS, which is relatively primitive to write. To use less, you can use easy-less directly in wechat developer tools to compile less into WXSS. For specific steps, please refer to using less(Optimal) in wechat applet.

Network request

The applet uses wx.request to initiate an HTTPS network request. The success and failure of the request are handled as a callback function, which we encapsulate as a promise.

export function request(options){
  /* options
  {
    url,
    method,
    data
  } 
  */
  return new Promise((resolve,reject) => {
    wx.request(Object.assign({
      success(res){
        resolve(res.data)
      },
      fail(err){
        reject(err)
      },
      timeout: 10000
    },options))
  })
}
Copy the code

Use:

import { request } from "./request"

const BASE_URL = "https://api.github.com"
const TRENDING_URL = "https://github.com/trending" 


export function getTrending(timespan,language){
  let trendingUrl =  language ? `${TRENDING_URL}/${language}` : TRENDING_URL
  let params = {
    url: trendingUrl,
    data: {
      since : timespan ? timespan : "daily"
    }
  }
  return request(params)
}

export function getReadme(reposname){
  return request({
    url: `${BASE_URL}/repos/${reposname}/contents/README.md`
  })
}

export function getRepoInfo(reposname){
  return request({
    url: `${BASE_URL}/repos/${reposname}`
  })
}

export function searchRepos(keyword,page){
  return request({
    url: `${BASE_URL}/search/repositories?p=${page}&q=${keyword}&sort=match`
  })
}
Copy the code

Routing hop

Use wx.navigateTo for normal jumps.

checkDetail(ev){ let reposname = ev.currentTarget.dataset['reposname'] wx.navigateTo({ url: '/pages/detail/detail? reposname='+reposname }) }Copy the code

In the detail page, you can get the parameters of the route jump by using the parameters of the onload hook function.

onLoad: function (options) {
    let reposname = options.reposname
    ...
}
Copy the code

Custom Components

The components of the applets are similar to the pages, and are also four files: JS, JSON, WXML, and WXSS. Create a Component by right-clicking New Component in wechat Developer Tools.

To use a component, you need to register it. There are two ways to register a component:

  • 1. Global registration. Register in app.json so that each page can use the component directly.
//app.json
"usingComponents": {
    "repository": "/components/repository/index"
},
Copy the code
  • 2. Page registration. You can use components in the current page by registering them in the.json file of the page.
//search.json
"usingComponents": {
    "repository": "/components/repository/index"
}
Copy the code

Similar to vUE, the properties of the child component defines the component’s property list, which is used by the parent component to pass values to the child component. The child component fires the parent component’s events via this.triggerEvent.

//search.wxml <repository reposList="{{repos}}" bind:changeMarkFn="changeMarkStatus"></repository> //repository/index.js Component({/** * list of components */ properties: {reposList: Array}, /** * list of components */ methods: { changeMark(ev){ let mark = ev.currentTarget.dataset['mark'], index = ev.currentTarget.dataset['reposindex'] this.triggerEvent('changeMarkFn', { index: index, markStatus: mark }) } } })Copy the code

The primitive 2.9.3 library supports simple bidirectional binding, but is limited (1) to a single field binding, and (2) to a data path, so you can only change the values of arrays, objects, and other properties in the parent component using this.triggerEvent. It is then passed to the child components.

Events: Applets use bind and catch to bind events

<view bind:tap="checkDetail"></view>
<view catch:tap="changeMark"></view>
Copy the code

The bind event bubbles, and the catch event does not.

For example, in the picture below, click the whole blue box to jump to the detail page and click the purple box to “save”. At this time, the click event in the purple box area should not bubble and should be “catch”.

` ` `

Using component libraries

Using component libraries can improve our development efficiency. I think we use @vant/ regenerative p in this program.

(1) Create package.json in the project root directory, NPM init

(2) Install component library packages, NPM i@vant/appellate P-s

(3) in wechat developer toolstoolClick on theBuild the NPMThe miniprogram_npm folder is created in the current directory.

(4) Register components. Like custom components, there are global registrations and page registrations.

"usingComponents": {
   "van-search": "@vant/weapp/search/index"
}
Copy the code

Custom header

The default header for the applets looks like this.The title can only be configured with text. If you want to add a button to the title, you need to customize the header.

//trending.json
{
  "navigationStyle": "custom"
}
Copy the code

In the custom header, the content on the left should be aligned with the small program button on the right, and there should be a certain distance from the top of the page, which is different for each model. Use wx.getSystemInfoSync().statusBarHeight to get the height of the red box in the image below, and then adjust the position of the content on the left relative to the red box.

<view class="header" style = "padding-top:{{statusBarHeight+10+'px'}}"> 
   <slot></slot>
</view>
Copy the code

release

The development of small procedures can be released.

(1) In the wechat developer tool, click Upload, and then upload the code as prompted.(2) Log in to the applet background, and you can see the submitted version in version management.

(3) Select the version as the experience version, you can test the effect of the small program. After the completion of the test submitted for review, after the review can release the small program.