[male nanny style] teach you to open the first wechat applet

  Home page : The blog of Uncle Wang who wrote the program welcome Visit

Support : give the thumbs-up Collection Focus on

Community :JAVA Full stack advanced learning community welcome Join in

Content of this article Amount of knowledge Compare many , First, please One After browsing Step by step Learn to use ~ 

Catalog

1 introduction  

2 Official website ： Wechat applet

3 register

3.1  mailbox

3.2 password

4 Setting basic information

4.1 Set up

4.2 Association settings

5  Development tools download

6 Create a new simulated applet

7 Version management tools

---

  What is wechat applet

1 introduction  

        WeChat Applet , Applet A kind of , English name Wechat Mini Program, It can be used without downloading and installing application , It implements the application “ Within reach ” The dream of , Users can scan or search to open the application .

      2016 year 1 month 11 Japan , WeChat Zhang Xiaolong, the father of Zhang Xiaolong, made a public appearance after many years , Read the four major features of wechat sense of worth . Xiao-long zhang Pointed out that , More and more products are done through official account , Because it's developed here 、 It's cheaper to get users and spread . The split service number does not provide better service , So wechat is studying new forms , It's called 「 Wechat applet 」.

  How to register and use applets

2 Official website ： Wechat applet

 3 register

      Registered address ： Applet

      In the following illustration , You can see the access process , According to instructions , Register step by step .

3.1  mailbox

Suggest ： Choose a mailbox you often use

3.2 password

Suggest ： Whole own the Commonly used Of password , other Strange and eccentric  7s Then I forgot .

After other input , confirm “ register ”. according to ①-②-③ Conduct .

4 Setting basic information

4.1 Set up

        Basic information in applet , Such as essential information , Feature set etc.

4.2 Association settings

    The official account can be associated with the applet .

  Connection way ：

  relation appid：

After Association , Display information of official account . 

  The above is the basic setting part , At present, novices are enough , later stage In succession In depth introduction Of knowledge .

Download Development Tools

5  Development tools download

After registration , Download the wechat applet development tool on the official website , It's easy to develop .

Download address ： Stable version Stable Build | Wechat open documents

  It is recommended to download the following versions during the development phase ：

  browser Can directly download ：

   After installation , Open development tools , establish first Applet .

Create a new applet project each time , Refer to the above example figure for detailed steps .

The first simulation applet

6 Create a new simulated applet

      

Code display

wxml

<!--index.wxml-->
<view class="container">
  <view class="title" style="font-size: small;text-align: center;">【 Male nanny 】 I will teach you to open the first wechat applet </view>
  <view class="environment" style=" width: 50px;height: 20px;margin-bottom: 10rpx;text-align: center;">{
   {nickName}}</view>
  <image src="{
   {img}}" style=" width: 50px;height: 50px;"></image>
  <button type="default"  bindtap="getUserInfor" hidden="{
   {hiddenButton}}"> pick up information </button>

</view>

js

// index.js
// const app = getApp()
const { envList } = require('../../envList.js');
Page({
  data: {
    showUploadTip: false,
    userinfor:{},// The user stores the obtained user information 
    haveCreateCollection: false,
    nickName:"",
    img:"",
    hiddenButton:false// Hide button 
  },
  getUserInfor(e){
    wx.getUserProfile({
      desc: ' Used to get user information ',
      success:(res)=>{
         const userinfor = res.userInfo
         // Write user data to the cache 
        wx.setStorageSync('UserInfo', userinfor);
        console.log(userinfor);
        this.setData({
            nickName:userinfor.nickName,
            img:userinfor.avatarUrl,
            hiddenButton:true
        });
        // Jump back to the previous page 
        wx.navigateBack({
            delta:1
        })
      }
    })
 }
});

【 remember 】

Account information ： Always keep

7 Version management tools

    Please refer to a guide blog of the blogger for specific operation steps ： Wechat development tools and Gitee Implement code management

  Knowledge expansion ： Wechat applet connects to local interface

---

️ Be careful  ~

This issue is over , If The content is wrong , Please The comment area indicates ！

if there be doubt Can be in Comment area or Private message , Try my best ‍*️ Help you solve ！

If my article has help To you , welcome Reward ️ encourage Blogger , Your encouragement is my motivation to share ~