小程序介绍

小程序介绍 以后更新视频链接:https://www.dustss.com/category/applets

1、什么是小程序

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

主要优势

1)用户可便捷地获取服务,无需安装或下载即可使用

2)具有更丰富的功能和出色的使用体验

3)封装一系列接口能力,帮助快速开发和迭代

2、开放注册的范围:

个人、企业、政府、媒体及其他组织

接入流程:

1)注册

在微信公众平台注册小程序,完成注册后可以同步进行信息完善和开发。

2)小程序信息完善

填写小程序基本信息,包括名称、头像、介绍及服务范围等。

3)开发小程序

完成小程序开发者绑定、开发信息配置后,开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。

4)提交审核和发布

完成小程序开发后,可以提交代码至微信团队审核,审核通过后即可发布。

小程序开发介绍

app的生命周期
onLaunch 小程序/页面初始化完成时触发,全局只触发一次
onLoad 小程序/页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow 小程序/页面显示/切入前台时触发
onHide 小程序/页面隐藏/切入后台时触发
onError 小程序/页面发生脚本错误或 API 调用报错时触发
其他 如:用户定义的全局变量
调试
打断点。在要调试的位置输入”debugger;” 后ctrl+s保存,即可在调试器中单步调试
调试器中正在调试的整行会被框中
F8 跳入下一个断点
F10 跳入下一步
小程序模块化
抽离通用方法作为通用函数
构建utils-common类
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
const common = require(‘common.js’)
Page({
helloMINA() {
common.sayHello(‘MINA’)
},
goodbyeMINA() {
common.sayGoodbye(‘MINA’)
}
})
引用
引用其他wxs:
被引用wxs提供可以被引用的方法或字段

// /pages/tools.wxs
var foo = “‘hello world’ from tools.wxs”;
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = “some msg”;
引用者

<!– page/index/index.wxml –>

<wxs src=”./../tools.wxs” module=”tools” />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>
// /pages/logic.wxs

var tools = require(“./tools.wxs”);

console.log(tools.FOO);
console.log(tools.bar(“logic.wxs”));
console.log(tools.msg);
import。import可以在该文件中使用目标文件定义的的template。但A引用B,B引用C,A不能引用C。
<!– item.wxml –>
<template name=”item”>
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用item模板:

<import src=”item.wxml” />
<template is=”item” data=”{{text: ‘forbar’}}” />
include。可以将目标文件除了<template><wxs>外的整个代码引入,相当于是拷贝到<include> 位置
<!– index.wxml –>
<include src=”header.wxml” />
<view>body</view>
<include src=”footer.wxml” />
<!– header.wxml –>
<view>header</view>
<!– footer.wxml –>
<view>footer</view>

————————————————
原文部分来自:https://www.dustss.com/?p=566
原文部分来自:https://blog.csdn.net/weixin_42089175/article/details/89381610

原文部分来自:小程序官方wiki

原文链接:https://www.dustss.com/566.html,转载请注明出处。

0
封面图

评论0

请先

没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码