微信小程序开发

最新推荐文章于 2023-08-08 11:08:44 发布

单人影i

最新推荐文章于 2023-08-08 11:08:44 发布

阅读量484

点赞数

分类专栏：微信开发

本文链接：https://blog.csdn.net/a185589690/article/details/100636659

版权

微信开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注册开发文档:
- https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
  - 通过邮箱激活
- 注册完成之后又设置log和名称等. 记住开发者id
- 绑定开发者
- 服务器域名: 产线环境是不能直接通过ip访问的,必须通过域名访问.域名必须是通过备案的.
  - 开发的时候直接本地ip就可以了.
  - 上线的话需要注册审核通过的域名.
官方API的发开地址和开发工具:
- https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

通过开发者工具生成小程序的前端项目.

设置项目在本地的目录. -->填写appi -->填写项目名称-->选择搭建模版(一般选择普通快速启动模版)--> 确定

在小程序中，对于html、js、css均做了扩展与限制，并且对其文件后缀有了新的定义。

文件         必填     作用
app.js       是      小程序逻辑
app.json     是      小程序公共设置
app.wxss     否      小程序公共样式表


页面由四个文件组成，分别是：
文件         必填     作用
js           是      页面逻辑 ( 微信小程序没有window和document对象 )
wxml         是      页面结构 ( WeiXin Markup Language，不是HTML语法 )
wxss         否      页面样式表 (WeiXin Style Sheets 拓展了rpx尺寸单位，微信专属响应式像素 )
json         否      页面配置

app.json 配置项列表
- app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设
  置多 tab 等。
组件应该就看开发文档就好了.

setData()

Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
callback Function 否 setData引起的界面更新渲染完毕后的回调函数

注意：
1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问
题。

建议不要使用this.xx= obj 这种写法. 如果硬要这么写,在结尾处调用this.setData也能更新数据

导出公共的js

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者
exports 才能对外暴露接口。

注意:exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错
误。所以采用 module.exports 来暴露模块接口

js文件
function sayHello(name) {
    console.log(`Hello ${name} !`)
}

function sayGoodbye(name) {
    console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye


导入的页面:在需要使用这些模块的文件中，使用 require(path) 将公共代码引入
const common = require('common.js')
Page({
    helloMINA() {
        common.sayHello('MINA')
    }, goodbyeMINA() {
        common.sayGoodbye('MINA')
    }
})

尺寸单位:

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

设备         rpx换算px (屏幕宽度/750)         px换算rpx (750/屏幕宽度)
iPhone5           1rpx = 0.42px                 1px = 2.34rpx
iPhone6           1rpx = 0.5px                  1px = 2rpx
iPhone6 Plus      1rpx = 0.552px                1px = 1.81rpx

 开发微信小程序建议用 iPhone6 作为视觉稿的标准。

全局样式与局部样式
- 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只
  
  作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
网络相关API
- https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
图片相关API
- https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
预览图片 :
- https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html
相机相关API
- https://developers.weixin.qq.com/miniprogram/dev/api/wx.createCameraContext.html
扫描二维码
- https://developers.weixin.qq.com/miniprogram/dev/api/wx.scanCode.html
动画
- https://developers.weixin.qq.com/miniprogram/dev/api/Animation.html

小程序授权登录

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
登录流程:

后端登录代码:


import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

import java.time.Duration;
import java.util.HashMap;
import java.util.Map;

@RequestMapping("wx")
@RestController
public class WeiXinLoginController {
    @Autowired
    private RestTemplate restTemplate;
    @Autowired
    private RedisTemplate<String, String> redisTemplate;

    @PostMapping("login")
    public Map<String, Object> wxLogin(@RequestParam("code") String code) {
        Map<String, Object> result = new HashMap<>();
        //默认成功
        result.put("status", 200);
        String appid = "appid";
        String secret = "secret";
        String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appid + "&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code";
        String resData = this.restTemplate.getForObject(url, String.class);
        //如果返回包含errcode说明登录失败
        if (StringUtils.contains(resData, "errcode")) {
            // 登录失败
            result.put("status", 500);
            result.put("msg", "登录失败");
            return result;
        }
        //获取MD5值,做成token
        String token = DigestUtils.md5Hex(resData);
        String redisKey = "WX_LOGIN_" + token;
        //存到缓存中
        this.redisTemplate.opsForValue().set(redisKey, resData, Duration.ofDays(1));
        result.put("data", token);
        return result;
    }
}

通过restTemplate发送HTTP请求, restTemplate并不能直接注入. 需要初始化容器.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.client.RestTemplate;

@Configuration
public class restTemplateConfig {
    @Bean
    public RestTemplate restTemplate() {
        return new RestTemplate();
    }
}

前端页面代码:

wxml：

<view class="container"> 
        <button type="primary" bindtap="login">登录</button> 
        <button type="primary" bindtap="checkLogin">检测登录状态</button> 
</view>

js:

checkLogin(){
    const _this = this;
    wx.checkSession({
        success() { // session_key 未过期，并且在本生命周期一直有效
            wx.showToast({title: '处于登录状态', icon: 'success', duration: 2000});
        }, fail() {
            wx.showToast({title: '登录已失效!', icon: 'none', duration: 2000});
            _this.login() // 重新登录
        }
    })
}
,
login(){
    wx.login({
        success(res) {
        console.log(res);
        if (res.code) { // 发起网络请求
            wx.request({
            url: 'http://127.0.0.1:8080/wx/login',
            method: "POST",
            //设置请求的类型, 后台是表单提交.
            header: {"content-type": "application/x-www-form-urlencoded"},
            data: {code: res.code},
            success: function (data) {
            if (data.data.status == 200) {
                //存到域对象中
                wx.setStorage({key: 'TICKET', data: data.data.data});
                wx.showToast({title: '登录成功', icon: 'success', duration: 2000});
                } else {
                wx.removeStorage({key: 'TICKET'});
                wx.showToast({title: '登录失败!', icon: 'none', duration: 2000})
                }
            }
        })
    } else {
        console.log('登录失败！' + res.errMsg)
        }
    }
}
)
},

小程序嵌入html5页面
- 关于使用小程序开发项目，往往会有2种方案，一种是使用小程序原生api进行开发，另外一种是在小程序中嵌入htm5页面进行开发。在小程序中嵌入html5功能是通过web-view实现的。
- web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
  - 文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
  - ```
  小程序api开发优缺点对比：
      优点
          显示、体验效果好
          可使用的微信资源、接口丰富
          响应速度快
      缺点
          开发方面，需要多开发一套项目
          小程序自成一派，如有缺陷，解决起来费时费力
  
  嵌入html5
      优点
          无需专门开发一套小程序版本项目
          更新同步
          开发速度快
      缺点
          能够使用的微信资源受限
          体验比原生略差
```
- 采用web-view实现
  - 小程序的这个<web-view>总是自动铺满整个页面，且每个页面只能有一个<web-view>，它会覆盖其他组件。也就是说，没有办法实现小程序界面组件和<web-view>页面混排的情况，这点要注意。
    - ```
     
    <web-view src="http://127.0.0.1:9000/"></web-view>
```
- 在内嵌的HTML页面中跳转回小程序
  - 如果要在已经通过<web-view>嵌入小程序的网页中，跳转到小程序中的其他页面(Page)，可以引入微信的一个JSSDK，使用它提供的方法来实现相关跳转功能。网页代码类似如下所示：
    - ```
    
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
    
    <script>
    // 跳转到小程序的一个页面
    wx.miniProgram.navigateTo({url: '/path/to/page'})
    </script>
```
- WePY介绍
  - WePY是能够让小程序支持组件化开发的框架。https://tencent.github.io/wepy/
- 插件
  - 插件，是可被添加到小程序内直接使用的功能组件。开发者可以像开发小程序一样开发一个插件，供其他小程序使
    
    用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发，为用户提供更丰富的服务。
  - https://developers.weixin.qq.com/miniprogram/introduction/plugin.html?t=18122618
    
    插件集演示（https://gitee.com/dgx/wx-jq）：

单人影i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发

注册开发文档: https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN 通过邮箱激活注册完成之后又设置log和名称等. 记住开发者id 绑定开发者服务器域名: 产线环境是不能直接通过ip访问的,必须通过域名访问.域名必须是通过备案的. 开发的时候直接本地ip...
复制链接

扫一扫