Recommended to people who are new to WeChat development

WeChat Mini Program is something between a native app and H5. If you have used cordova, Hbuiler, appCan and the like to develop hybrid apps, then the WeChat applet may be closer to this method. However, WeChat mini programs rely on the WeChat development platform, and even the IDE is dedicated. The finished product can only be found in WeChat by searching or scanning the QR code to find the entrance, and then access it. These days I have been trying to use WeChat applet to rewrite the original H5 project. I have some small experiences, and I am afraid that I will forget them after a long time, so I wrote them down and used them as a memo, and also shared them with classmates who want to learn WeChat mini programs.

The WeChat applet is made in China, so you don’t have to worry about the documents being incomprehensible or the network being blocked, which is very convenient. The official getting started tutorial is written very simply and is directly linked to. If you have not come into contact with WeChat mini programs before, you can follow my steps.

The first thing is to download the development tools and sharpen the knife without missing the wood. Click here to download This is an IDE tool for WeChat applet development. It integrates preview, packaging and publishing,

debugging, and syntax prompts. Even so, I am still not used to it. I am used to using sublime. Edit the code and just use it to debug the code.

Installation is quite simple, so I won’t go into details. Double-click it to open it. If prompted to scan the code to log in, scan the code through WeChat to authorize, and then you can perform the following operations.

I just want to experience it now, click `No APP`, write the project name according to actual needs, and choose an empty directory for the directory. Click to add the item, and the completed effect is as follows:

Click to edit, the left side is

directory structure, the middle is the preview effect, and the right is the console.

If checked, sample code will be generated. There are three files starting with app and two directories, pages and utils, under the directory. About the entire For the directory structure, please refer to the official introduction to

Framework. Here are some knowledge points that need to be understood:

.js is the script code of the mini program, .wxss is the style, and .json is Configuration information. Every time a new page is added, a new configuration must be added to the page item in app.json. For example, add an "About Us":

"pages":[
    "pages/index/index",
    "pages/logs/logs",
   "pages/about/about" //添加关于我们
  ],

After saving, the necessary files and directories will be automatically generated. Next, make corresponding modifications according to your own business. Note that in WeChat mini programs, tools such as jQuery/zetpo can no longer be used. Because there is no window in the WeChat applet

For the pages you create, they all start with Page({}). If you have used Vue, imagine the calling method of new Vue({}). The syntax and ideas of WeChat applet are very similar to Vue, maybe it is possible to refer to its method.

Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  onLoad: function () {
     //初始化
  }
})

The page part of the WeChat applet ends with .wxml, just think of it as .html, but its syntax is similar to the xml structure, and the tags must be self-closing, such as 23862698643677493d512595a341edac view container component, 806a43c0997cff837bc4d4708cd6ae53 slider component, 1e1a87098176c2ab63d169c4a11e81ed icon component. If you have used React, then you will feel familiar with them. Feel. Usage of view:

<view class="usermotto">
    <text class="user-motto">{{motto}}</text>
</view>

The usage of components is very simple, df3bc41a1455ca94b58055136ce576c9middle content area16bbdd474e7e1f7f182b48c374bef73a. Components should be used in pairs. If it is a single label, use a self-closing form. . Components are modified by adding

attributes, such as class, id, data-*, etc. This is consistent with the usage of html tags. All component names and attribute names are lowercase, and can be connected with "-" in the middle. (Class in React should be written as className, and the first letter of the component should be capitalized. There is no such restriction here),

Usage examples of image components:

a7b6775be550cfefb7a1f52130f51711f8e950ebc6c1ea27f76cf997b9216fe6

where src is a variable, bound in the form of {{variable name}}. If the data in the app changes, the view will automatically update.

Be careful when using local images in styles:

For image addresses in styles, such as: background-image:url('../images/logo.png' ) This is not possible. After packaging, you cannot see the image. There are two solutions:

1. Use the dc0870658837139040642baa5555a380 tag instead of the style.

2. Use absolute paths. For example: http://img.server.com/logo.png

Bounding

Event, such as click event:

f170192362df43cc7b28dccce5313d31

bindtap是固定写法就相当于onclick，bindViewTap就是事件要做的事情。相当于onclick=bindViewTap，不过和直接在html中的on绑定又有点区别，这里用的bindtap是虚拟邦定，最终都是通过事件代理进行实际派发，所以event对象也是一个二次封装的对象。这一点和React中的事件邦定用法是同样的套路。

在view上邦定好事件类型和方法名之后，要在页面（比如index)中添加相应的事件函数。比如：

Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  }

更多参考信息

变量循环：wx:for

页面中使用 block 控制标签来组织代码，在 block上使用 wx:for 绑定 循环数据，并将 循环体数据循环展开节点

<block wx:for="{{数组变量}}">
   {{item}} //item数组成员
</block>

页面跳转：wx.navigateTo 

wx.navigateTo({
      url: '../about/about'
 })

插件API:

依靠插件，微信小程序可以使用原生APP才有的功能，具体内容查看官方插件列表。下面以调用摄像头和相册为例，介绍插件的用法：

wx.chooseImage

首页在页面中绑定一个点击事件：

<!--pages/about/about.wxml-->
<view>
    <text>pages/about/about.wxml</text>
    <icon type="success" bindtap="bindEvent"></icon>
</view>

然后在about.js中添加事件函数

// pages/about/about.js
Page({
  data:{},
  //....省略无关代码
  bindEvent:function(e){
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
      }
    })
  }
})

预览：

点击IDE工具的左边，“项目” ，如果有AppID ，可以上传，通过手机在微信中进行查看。

其它：

微信小程序中有许多与传统开发方式不一样的地方，需要多留意官方的F&Q ,避免趟一些不必要的坑。

The above is the detailed content of Recommended to people who are new to WeChat development. For more information, please follow other related articles on the PHP Chinese website!