Recommended to people who are new to WeChat development-WeChat Development-php.cn

Table of Contents

wx.chooseImage

Home

WeChat Applet

WeChat Development

Recommended to people who are new to WeChat development

Y2J

May 04, 2017 pm 04:32 PM

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" //添加关于我们
  ],

Copy after login

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: &#39;Hello World&#39;,
    userInfo: {}
  },
  onLoad: function () {
     //初始化
  }
})

Copy after login

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 view container component, slider component, 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>

Copy after login

The usage of components is very simple, middle content area. 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:

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 tag instead of the style.

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

Bounding

Event, such as click event:

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

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

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

Copy after login

更多参考信息

Copy after login

变量循环：wx:for

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

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

Copy after login

页面跳转：wx.navigateTo

wx.navigateTo({
      url: &#39;../about/about&#39;
 })

Copy after login

插件API:

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

wx.chooseImage

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

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

Copy after login

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

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

Copy after login

预览：

点击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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7927

Java Tutorial

1652

CakePHP Tutorial

1411

Laravel Tutorial

1303

PHP Tutorial

1250

Related knowledge

Is the company's security software causing the application to fail to run? How to troubleshoot and solve it? Apr 19, 2025 pm 04:51 PM

Troubleshooting and solutions to the company's security software that causes some applications to not function properly. Many companies will deploy security software in order to ensure internal network security. ...

What is the difference between H5 page production and WeChat applets Apr 05, 2025 pm 11:51 PM

H5 is more flexible and customizable, but requires skilled technology; mini programs are quick to get started and easy to maintain, but are limited by the WeChat framework.

Ouyi Exchange app domestic download tutorial Mar 21, 2025 pm 05:42 PM

This article provides a detailed guide to safe download of Ouyi OKX App in China. Due to restrictions on domestic app stores, users are advised to download the App through the official website of Ouyi OKX, or use the QR code provided by the official website to scan and download. During the download process, be sure to verify the official website address, check the application permissions, perform a security scan after installation, and enable two-factor verification. During use, please abide by local laws and regulations, use a safe network environment, protect account security, be vigilant against fraud, and invest rationally. This article is for reference only and does not constitute investment advice. Digital asset transactions are at your own risk.

How to solve the problem of JS resource caching in enterprise WeChat? Apr 04, 2025 pm 05:06 PM

Discussion on the JS resource caching issue of Enterprise WeChat. When upgrading project functions, some users often encounter situations where they fail to successfully upgrade, especially in the enterprise...

The difference between H5 and mini-programs and APPs Apr 06, 2025 am 10:42 AM

H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.

What should I do if the company's security software conflicts with applications? How to troubleshoot HUES security software causes common software to fail to open? Apr 01, 2025 pm 10:48 PM

Compatibility issues and troubleshooting methods for company security software and application. Many companies will install security software in order to ensure intranet security. However, security software sometimes...

How to choose H5 and applets Apr 06, 2025 am 10:51 AM

The choice of H5 and applet depends on the requirements. For applications with cross-platform, rapid development and high scalability, choose H5; for applications with native experience, rich functions and platform dependencies, choose applets.

What are the development tools for H5 and mini program? Apr 06, 2025 am 09:54 AM

H5 development tools recommendations: VSCode, WebStorm, Atom, Brackets, Sublime Text; Mini Program Development Tools: WeChat Developer Tools, Alipay Mini Program Developer Tools, Baidu Smart Mini Program IDE, Toutiao Mini Program Developer Tools, Taro.

See all articles